Materias Organigrama Maker

Create concept trees, organizational charts, and prerequisite diagrams for your academic courses — all in an interactive, drag-and-drop editor.

Screenshots

✨ Features

• Interactive Diagram Editor — Drag-and-drop subjects onto a canvas, connect prerequisites with edges, and rearrange freely with React Flow
• Custom Subject Nodes — Each subject card shows name, code, semester, type (obligatory/elective/optional), and notes
• Note Annotations — Attach sticky-note annotations anywhere on the diagram
• Auto-Layout — Automatically arrange nodes in top-bottom or left-right hierarchies using the dagre graph layout algorithm
• Undo / Redo — Full history support with Ctrl+Z / Ctrl+Y
• PDF Export — Generate a structured PDF document with subjects organized by semester in styled boxes (not a screenshot — a proper formatted document)
• JSON Import / Export — Save and load diagrams as JSON files. Share them with others or use AI to generate them
• Auto-Save — Your work is automatically saved to localStorage
• GSAP Landing Page — Animated landing page with ScrollTrigger scroll-driven reveals
• AI Skill — Includes an agent skill that enables any AI to convert plain-text subject lists into compatible JSON

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

git clone https://github.com/your-username/materias-organigrama-maker.git
cd materias-organigrama-maker
npm install

Development

npm run dev

Open http://localhost:3000 to see the landing page, then navigate to /editor to start building your diagram.

Build

npm run build
npm start

📐 Usage

Editor

1. Add subjects: Click the "Materia" button or drag from the sidebar
2. Connect prerequisites: Drag from a bottom handle to a top handle
3. Edit details: Select a node and use the sidebar to edit name, code, semester, type, and notes
4. Auto-layout: Click "Vertical" or "Horizontal" to auto-arrange
5. Export PDF: Click "PDF" to download a structured PDF document
6. Save/Load: Use "JSON" to export and "Importar" to load

AI-Generated Diagrams

This project includes an AI skill at .agents/skills/materias-to-json/SKILL.md. Pass this skill to any AI agent along with your subject list, and it will generate a JSON file compatible with the editor.

Example input:

Cuatrimestre 1:
- Matemática I (MAT101, obligatoria)
- Introducción a la Programación (PROG101, obligatoria)

Cuatrimestre 2:
- Matemática II (MAT201, obligatoria) [requiere: Matemática I]
- Algoritmos (PROG201, obligatoria) [requiere: Introducción a la Programación]

The AI will output a JSON file that you can import directly into the editor.

📄 JSON Format

The editor uses the following JSON schema:

{
  "nodes": [
    {
      "id": "unique-id",
      "type": "subject",
      "position": { "x": 0, "y": 0 },
      "data": {
        "label": "Subject Name",
        "semester": 1,
        "type": "obligatoria",
        "notes": "Optional notes",
        "code": "MAT101"
      }
    },
    {
      "id": "note-id",
      "type": "note",
      "position": { "x": 300, "y": 0 },
      "data": {
        "text": "Note content"
      }
    }
  ],
  "edges": [
    {
      "id": "edge-id",
      "source": "source-node-id",
      "target": "target-node-id",
      "type": "smoothstep",
      "animated": true
    }
  ]
}

Node Types

Type	Description
subject	A faculty subject/course with metadata
note	A free-text annotation

Subject Data Fields

Field	Type	Description
label	string	Subject name
semester	number (1-10)	Semester/quarter number
type	"obligatoria" | "electiva" | "optativa"	Subject classification
notes	string	Optional notes
code	string	Subject code (e.g., MAT101)

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Diagrams: @xyflow/react (React Flow)
• Animations: GSAP + ScrollTrigger
• Layout: dagre (graph layout algorithm)
• PDF: jsPDF
• Styling: Tailwind CSS v4
• Language: TypeScript

📁 Project Structure

app/
├── page.tsx                    # Landing page with GSAP animations
├── layout.tsx                  # Root layout with fonts and metadata
├── globals.css                 # Design system and theme
├── components/
│   └── LandingAnimations.tsx   # GSAP animation wrapper
└── editor/
    ├── page.tsx                # Main editor page
    ├── components/
    │   ├── SubjectNode.tsx     # Custom subject node
    │   ├── NoteNode.tsx        # Custom note node
    │   ├── Toolbar.tsx         # Editor toolbar
    │   └── Sidebar.tsx         # Node palette & detail panel
    ├── hooks/
    │   └── useFlowState.ts     # State, history, persistence
    └── utils/
        ├── layoutUtils.ts      # Dagre auto-layout
        └── pdfExport.ts        # PDF generation
.agents/skills/
└── materias-to-json/
    └── SKILL.md                # AI skill for JSON generation

📜 License

MIT