English Français العربية

io.github.yoavhizkiH/siren

السجل الرسمي الذكاء الاصطناعي والوكلاء

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

الشيفرة المصدرية التوثيق

ماذا يمكنك أن تفعل مع 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

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

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

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  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.

الأسئلة الشائعة

ما هو io.github.yoavhizkiH/siren؟

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

كيف أثبّت io.github.yoavhizkiH/siren؟

يعمل على جهازك. في Claude Code: claude mcp add siren -- npx -y siren-mcp@0.1.0. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج io.github.yoavhizkiH/siren إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل io.github.yoavhizkiH/siren مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون io.github.yoavhizkiH/siren؟

ينشره yoavhizkiH. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.