# siren [Health: Active]

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/yoavhizkiH/siren  
**GitHub Stars:** 2  
**npm Downloads (last month):** 17  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/siren-2

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

## Claude Desktop Quick Installation
Heuristic fallback — verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low):

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

## Documentation & README

# 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
![Flowchart](https://raw.githubusercontent.com/yoavhizkiH/siren/HEAD/screenshots/flowchart.png)

### Architecture diagram
![Architecture](https://raw.githubusercontent.com/yoavhizkiH/siren/HEAD/screenshots/architecture.png)

### Sequence diagram
![Sequence](https://raw.githubusercontent.com/yoavhizkiH/siren/HEAD/screenshots/sequence.png)

### CI/CD pipeline
![Pipeline](https://raw.githubusercontent.com/yoavhizkiH/siren/HEAD/screenshots/pipeline.png)

## 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

```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](https://react.dev) + [TypeScript](https://www.typescriptlang.org)
- [Vite](https://vitejs.dev)
- [dagre](https://github.com/dagrejs/dagre) for flowchart layout
- [MUI icons](https://mui.com/material-ui/material-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](https://github.com/yoavhizkiH/siren/blob/HEAD/LICENSE).