DiagramOS
Mermaid diagrams, alive
A visual editor for Mermaid diagrams with bidirectional sync between canvas and code, AI-powered natural-language editing, and a built-in MCP server — so both humans and agents can draw.
Features
Visual canvas
Drag and drop nodes, connect with curved Bezier edges, resize, edit labels inline. Double-click edges for FigJam-style labels. Built on React Flow.
Bidirectional sync
Work freely on canvas or code, then sync when ready. Code to Canvas parses Mermaid and renders; Canvas to Code converts visual nodes back. Smart save indicator tracks sync state.
AI assistant
Conversational AI that can answer questions about your diagram and edit it via natural language. 'Add a load balancer between the gateway and the services' — done.
MCP server
Built-in MCP endpoint lets any AI tool (Claude Desktop, Cursor, Cline) store and retrieve diagrams programmatically. Agents can draw architecture diagrams as part of their workflow.
Formatting toolbar
Select nodes or edges to get a floating format bar — colors, shapes (rect/round/diamond/pill), border styles, edge thickness. Like Miro, but for diagrams.
Architecture
Next.js app with React Flow canvas, Monaco code editor, and AI chat panel. Mermaid parser for code-to-canvas, AI-powered canvas-to-code. MCP server at /api/mcp. File-based + DynamoDB storage.