Getting Started
Learn the JSON-first Siren workflow for creating and rendering diagrams.
Siren uses typed JSON to describe diagrams. Write JSON in the editor, validate it, and render it live in the preview panel.
Siren does not invent a custom diagram language. JSON is the canonical format.
Supported Diagram Types
| Type | Description |
|---|---|
| Flowchart | Process flows, decision trees, pipelines |
| Sequence | API calls, service communication, request/response patterns |
| Architecture | Services, zones, and infrastructure diagrams |
| ER | Entities, fields, and relationships |
| State | State machines and transitions |
| Class | UML class diagrams with inheritance and associations |
| C4 | C4 model — people, systems, and boundaries |
| Block | Block diagrams with nested groups |
| Requirement | Requirements traceability and relationships |
| Timeline | Chronological events and milestones |
| Mindmap | Hierarchical brainstorming and idea maps |
| Git Graph | Commits, branches, and merges |
| Gantt | Project schedules with tasks and sections |
| Sankey | Flow quantities between nodes |
| Kanban | Task boards with columns and cards |
| Pie | Pie and donut charts |
| Quadrant | 2×2 prioritization matrices |
| Packet | Network protocol header bit layouts |
Core workflow
The recommended Siren workflow is:
- Create a Siren JSON document
- Run
validate() - Render with
fromJSON()
Basic Structure
Every Siren diagram is a JSON object with a type field that determines the diagram kind:
{
"type": "flowchart",
...
}{
"type": "sequence",
...
}Your First Diagram
Paste this into the Playground editor:
{
"type": "flowchart",
"direction": "TB",
"nodes": [
{ "id": "a", "label": "Start", "variant": "primary" },
{ "id": "b", "label": "Do something" },
{ "id": "c", "label": "Done", "variant": "success" }
],
"edges": [
{ "from": "a", "to": "b" },
{ "from": "b", "to": "c" }
]
}Nodes are the boxes. Edges are the arrows between them. Siren handles all the layout automatically.
Next steps
- JSON Schema — validation reference
- Render From JSON — programmatic rendering
- Theming — Dark, Light, GitHub, Presentation, and Neutral themes
- Best Practices — tips for structuring diagrams