io.github.yoavhizkiH/siren
MCP server for Siren diagramming — teach AI models to create beautiful diagrams with Siren syntax
Open source Open in the app JSON README (API)
About
MCP server for Siren diagramming — teach AI models to create beautiful diagrams with Siren syntax
Details
- Kind
- MCP servers
- Topic
- Media, design & games
- Publisher
- yoavhizkih
- Origin
- official
- Category
- ferramentas
- Transport
- local
- Version
- 0.1.0
- Stars
- 2
- Open pull requests
- 1
- Last push
- 2026-08-11T16:35:29Z
- Repository state
- ativo
- Language
- TypeScript
- License
- MIT
- Added
- 2026-08-29 04:01:42
- Updated
- 2026-08-29 04:01:42
- Origin id
io.github.yoavhizkiH/siren
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
### 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
```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](LICENSE).