Visual diagram editor with Mermaid support.
_{Draw, edit, share - no account required.}

Try it now

• Instant - Opens in milliseconds, works offline
• Visual - Drag, connect, style - everything editable on canvas
• Mermaid support - Paste Mermaid code, get editable visual diagram
• Shareable - One URL contains your entire diagram
• AI-native - API + MCP server for LLM integrations

• Node types - Rectangle, pill, diamond, circle, container (grouping), text, arrow
• Smart connections - Drag from any edge, auto-routing with rounded/straight modes
• Quick connect - Drop a connection on empty canvas to choose node type
• Fill styles - Outline, infill, stripe, grid patterns
• Colors - Tokyo Night Storm palette built-in

• Flowcharts - Standard flow with decisions, loops, groups
• Sequence diagrams - Lifelines, messages, loop/alt/opt frames
• Class diagrams - UML classes with properties and methods
• Architecture diagrams - Containers for grouping related components

• Mermaid import - Paste Mermaid code, get editable diagram
• PNG/SVG export - High-res images for docs
• Share URLs - URL contains full diagram state
• JSON - Full control over positioning

Online: draph.sanath.dev

Local:

git clone https://github.com/sanathks/draph.git
cd draph
npx serve

Or just open index.html directly.

Draph is built for AI agents. Generate diagrams via API or connect to Claude Desktop via MCP.

For AI integrations, fetch the context file:

https://draph.sanath.dev/llm.txt

Contains full JSON schema, color palette, and examples optimized for LLM consumption.

Create diagram:

curl -X POST https://draph.sanath.dev/api/diagram \
  -H "Content-Type: application/json" \
  -d '{"mermaid": "flowchart TD\n  A[Start] --> B{Decision}\n  B -->|Yes| C[Done]"}'

Returns:

{
  "url": "https://draph.sanath.dev/d/abc123",
  "editUrl": "https://draph.sanath.dev/#eyJuIjpb..."
}

• url - Short shareable link (for LLMs/sharing)
• editUrl - Direct editor link with full data

Export as PNG (experimental):

curl -X POST https://draph.sanath.dev/api/diagram/image \
  -H "Content-Type: application/json" \
  -d '{"nodes": [...], "connections": [...]}' \
  --output diagram.png

Add to Claude Desktop config:

{
  "mcpServers": {
    "draph": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://draph.sanath.dev/mcp"]
    }
  }
}

Tools: create_diagram, create_diagram_json, export_diagram_image (experimental)

Full documentation available at draph.sanath.dev/docs

• Getting Started
• Nodes and Shapes
• Connections
• Keyboard Shortcuts
• Mermaid Import
• API Reference
• LLM Integration
• Examples

MIT

Made by Sanath