Siren

Mermaid-compatible syntax. Draw.io-quality output.

Siren is an open-source diagramming tool that lets you write diagrams as text and renders them with beautiful, polished visuals — think Mermaid's simplicity with draw.io's aesthetics.

Examples

Flowchart

Architecture diagram

Architecture

Sequence diagram

Sequence

CI/CD pipeline

Pipeline

Features

Flowcharts — graph TD / graph LR with full node shape support
Architecture diagrams — annotate nodes with @icon to get automatic Material UI icons and tier-based color coding
Sequence diagrams — sequenceDiagram with all Mermaid arrow types, forward/return color distinction
Mermaid-compatible syntax — paste your existing Mermaid diagrams and they just work
Live preview — edits render instantly in the browser

Supported shapes

Code

[Rectangle]   (Rounded)   {Diamond}   ((Circle))   [(Cylinder)]
([Stadium])

Icon annotations

Append @icontype to any node ID to apply an icon and automatic color tier:

Code

Browser@user([Browser])
DB@database[(PostgreSQL)]
Cache@cache((Redis))

Available icons: user browser mobile cloud server database cache storage queue gateway shield firewall container function monitor

Quick start

bash

git clone https://github.com/your-org/siren.git
cd siren
npm install
npm run dev

Open http://localhost:5173.

Arrow types (sequence diagrams)

Syntax	Style
`->>`	solid, filled
`-->>`	dashed, filled
`->`	solid, open
`-->`	dashed, open
`-x`	solid, cross
`--x`	dashed, cross

Tech stack

React + TypeScript
Vite
dagre for flowchart layout
MUI icons for node icons
Pure SVG rendering — no canvas, no D3

Contributing

Pull requests are welcome. For major changes, open an issue first.

License

MIT — see LICENSE.