English Français العربية

io.github.yoavhizkiH/siren

Official registry AI and agents

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

Source code Documentation

What can you do with io.github.yoavhizkiH/siren?

  • 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

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

NPM package siren-mcp
Claude Code 
claude mcp add siren -- npx -y siren-mcp@0.1.0
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "siren": {
            "command": "npx",
            "args": [
                "-y",
                "siren-mcp@0.1.0"
            ]
        }
    }
}

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. Siren
  2. Examples
  3. Features
  4. Supported shapes
  5. Icon annotations
  6. Quick start
  7. Arrow types (sequence diagrams)
  8. Tech stack
  9. Contributing
  10. License

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

Sequence diagram

CI/CD 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

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

Icon annotations

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

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

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

Open http://localhost:5173.

Arrow types (sequence diagrams)

SyntaxStyle
->>solid, filled
-->>dashed, filled
->solid, open
-->dashed, open
-xsolid, cross
--xdashed, cross

Tech stack

Contributing

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

License

MIT — see LICENSE.

Frequently asked questions

What is io.github.yoavhizkiH/siren?

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

How do I install io.github.yoavhizkiH/siren?

It runs on your machine. In Claude Code: claude mcp add siren -- npx -y siren-mcp@0.1.0. For other clients, paste the JSON configuration from this page into their MCP settings.

Does io.github.yoavhizkiH/siren need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is io.github.yoavhizkiH/siren open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains io.github.yoavhizkiH/siren?

It is published by yoavhizkiH. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.