Siren

MCP server for Siren diagramming — teach AI models to create beautiful diagrams with Siren syntax

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "siren-2": {
      "command": "npx",
      "args": [
        "-y",
        "siren-2"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Siren

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "siren": { "command": "npx", "args": ["-y", "siren"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/siren-2?style=directory)](https://allmcps.com/mcp/siren-2)

HTML Embed

<a href="https://allmcps.com/mcp/siren-2"><img src="https://allmcps.com/api/badge/siren-2?style=directory" alt="Siren on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

27Quality signal: Emerging · 27/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge and attach your website — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Siren →Install in Claude Desktop Install in Cursor Install in VS Code

Documentation Overview

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.