MCP Server for Diagrams.love - Create and manage visual diagrams and flowcharts with AI assistance
MCP server for Diagrams.love — create diagrams and flowcharts with AI.
- 21 commands for schemas, projects, tags, versions, and import/export
- Version history: View, restore, and create checkpoints for schemas
- Auto-refresh: Browser automatically reloads when MCP updates schema
- Smart positioning: Existing elements keep their positions, new elements get auto-layout
- No coordinate conflicts: MCP ignores x/y to prevent overlapping cards
- Shared links support: Open schemas via public /shared/ URLs (read-only)
- Large schema handling: Automatic detection and preview for schemas >100 elements
| Command | Description |
|---------|-------------|
| list_schemas | List all schemas |
| get_schema | Get schema by ID |
| get_schema_by_url | Get schema by URL (canvas or shared link) |
| create_schema | Create new schema |
| replace_schema | Replace schema content |
| delete_schema | Delete schema |
| Command | Description |
|---------|-------------|
| import_schema_from_json | Import schema from JSON (multiple formats supported) |
| export_schema_to_json | Export schema to JSON file |
| Command | Description |
|---------|-------------|
| list_projects | List projects (folders) |
| create_project | Create project |
| update_project | Update project |
| delete_project | Delete project |
| move_schema_to_project | Move schema to project |
| Command | Description |
|---------|-------------|
| list_tags | List schema tags |
| add_tag | Add tag to schema |
| remove_tag | Remove tag from schema |
| tag_element | Assign/remove tag from element |
| Command | Description |
|---------|-------------|
| list_versions | List schema version history (auto-saves and manual checkpoints) |
| get_version | Get full data of a specific version |
| restore_version | Restore schema from a previous version (auto-backup before restore) |
| create_version | Create manual checkpoint with optional comment |
``bash`
npx schemeog-mcp
1. Open https://diagrams.love
2. Sign in with email
3. Go to Profile
4. Copy token from "Claude Code Integration" section
In ~/.claude.json (or Cline settings):
`json`
{
"mcpServers": {
"schemeog": {
"command": "npx",
"args": ["-y", "schemeog-mcp"],
"env": {
"SCHEMEOG_TOKEN": "schog_xxxxx..."
}
}
}
}
`json`
{
"id": "unique_id",
"type": "card",
"title": "Card Title",
"color": "light_blue",
"tags": ["tag1", "tag2"],
"description": "Detailed description",
"borderColor": "blue",
"completed": false,
"eventDate": "2025-03-15",
"connections": [
{"to": "next_element_id", "label": "optional label"}
]
}
IMPORTANT: Do NOT specify x and y coordinates!
- MCP automatically ignores coordinates to prevent cards from overlapping
- Existing elements keep their positions
- New elements are automatically positioned by auto-layout
- This prevents the common problem of Claude copying coordinates from existing cards
Element types:
- card — regular process/action cardcondition
- — decision point (diamond shape)ascii
- — ASCII diagram card (renders monospace ASCII art)
The ascii type renders ASCII diagrams inside a card with monospace font. Requires asciiContent field.
`json`
{
"id": "flow-1",
"type": "ascii",
"title": "Request Flow",
"asciiContent": "┌─────────┐ ┌─────────┐\n│ Request │────▶│ Process │\n└─────────┘ └─────────┘",
"borderColor": "purple"
}
ASCII card features:
- Monospace font rendering
- Auto-calculated width/height based on content
- Max 2000 characters for asciiContent
- Default border color: purple
- Supports box-drawing characters:
- Supports arrows:
Completion status (completed):
- true — card is marked as completed (done)false
- or omitted — card is not completed
Event date (eventDate):
- ISO 8601 format: "2025-03-15" or "2025-03-15T10:00:00Z"
- Used for deadlines, milestones, or scheduled events
ID uniqueness:
- Each element MUST have a unique id
- Duplicate IDs will cause an error and prevent schema creation
Available colors (color):
| Color | Purpose |
|-------|---------|
| white | Default white |light_blue
| | Main processes |light_green
| | Start and success |light_yellow
| | Checks and conditions |light_orange
| | Warnings |light_red
| | Errors and critical |light_purple
| | Decisions |light_gray
| | Completion |light_pink
| | Additional processes |light_teal
| | Special operations |
Border colors (borderColor): default, blue, green, orange, purple, red, teal, yellow, gray, black
Connections are defined inside each element's connections array:
`json`
{
"connections": [
{"to": "target_id", "label": "optional label", "style": "solid"}
]
}
Line styles (style): solid (default), dashed, dotted
When to use [square brackets]: UI transitions (screen to screen, user actions)
`json`
{
"connections": [
{"to": "home", "label": "[Login]"},
{"to": "profile", "label": "[Open Profile]"},
{"to": "settings", "label": "[Settings]"}
]
}
When to use NO brackets: Logic/data flow (conditions, API responses)
`json`
{
"connections": [
{"to": "success", "label": "valid"},
{"to": "error", "label": "invalid"},
{"to": "next", "label": "yes"},
{"to": "stop", "label": "no"}
]
}
Summary:
| Type | Format | Examples |
|------|--------|----------|
| UI transitions | [Brackets] | [Login], [Submit], [Back] |yes
| Logic/conditions | No brackets | , no, valid, error |
Example in ASCII:
`
┌───────────┐ [Login] ┌───────────┐ yes ┌───────────┐
│ Login │──────────▶│ Check? │────────▶│ Success │
└───────────┘ └───────────┘ └───────────┘
`json`
{
"name": "User Registration Flow",
"description": "User registration process",
"elements": [
{
"id": "start",
"type": "card",
"title": "Registration Form",
"color": "light_green",
"tags": ["user"],
"description": "User fills in email and password",
"connections": [
{"to": "validate", "label": "[Submit]"}
]
},
{
"id": "validate",
"type": "condition",
"title": "Validate Data",
"color": "light_yellow",
"tags": ["system"],
"connections": [
{"to": "save", "label": "valid"},
{"to": "error", "label": "invalid"}
]
},
{
"id": "save",
"type": "card",
"title": "Save to Database",
"color": "light_blue",
"tags": ["system"],
"connections": [{"to": "success"}]
},
{
"id": "error",
"type": "card",
"title": "Validation Error",
"color": "light_red",
"tags": ["system"],
"connections": [{"to": "start", "label": "retry"}]
},
{
"id": "success",
"type": "card",
"title": "Registration Complete",
"color": "light_green",
"tags": ["user"]
}
],
"tagsDictionary": [
{"id": "tag-user", "name": "user", "color": "#4CAF50"},
{"id": "tag-system", "name": "system", "color": "#2196F3"}
]
}
`json`
{
"tagsDictionary": [
{"id": "tag-1", "name": "system", "color": "#2196F3"},
{"id": "tag-2", "name": "user", "color": "#4CAF50"}
]
}
Tags = roles/actors. Indicate WHO performs the action:
- system, user, admin
- , manager, bot
When you edit a schema via MCP while viewing it in the browser:
- Browser automatically detects changes every 3 seconds
- Page reloads ONLY when changes are made by MCP (not by your own edits)
- No manual refresh needed — just edit via MCP and watch the browser update!
How it works:
- MCP marks all updates with updatedBy: 'mcp'
- Browser ignores its own updates ()
- This prevents infinite reload loops when you edit in browser
You can open any schema by URL using get_schema_by_url:
`Canvas URL (main format) — full access
https://diagrams.love/canvas?schema=abc123
Just paste the URL and the MCP will extract the schema ID automatically.
$3
When you open a schema via
URL:
- ✅ You can view the schema content
- ✅ You can analyze the structure
- ✅ You can count elements and connections
- ❌ You cannot edit — need access to original schemaThis is useful for:
- Analyzing schemas shared by others
- Answering questions about schema structure
- Getting inspiration for your own diagrams
Large Schema Handling
For schemas with >100 elements or >50KB data:
-
get_schema shows first 5 elements as preview
- get_schema_by_url shows statistics only
- Full data available via export_schema_to_jsonThis prevents context overflow in Claude Code when working with large diagrams.
Schema Methodology
Schema = complete tree of ACTIONS and CONSEQUENCES:
1. Each decision → show ALL possible options
2. Each option → show ALL consequences
3. Use
for decision points
4. NOT abstract thoughts — CONCRETE paths
5. Tags indicate WHO performs the actionExample:
`
"Submit Form" → condition "Validate" →
├── "Data Valid" → "Save" → "Success"
└── "Error" → "Show Errors" → "Fix Form"
Import/Export Formats
$3
Use
with the format parameter:| Format | Description |
|--------|-------------|
|
full | Complete export with metadata, viewport, and all data |
| compact | Schema name + elements + tagsDictionary only |
| elements_only | Just the elements array |$3
import_schema_from_json automatically detects and supports:1. Full SchemeOG export:
`json
{
"exportVersion": "1.0",
"schema": {
"name": "...",
"elements": [...],
"tagsDictionary": [...]
}
}
`2. Simple format:
json
{
"name": "...",
"elements": [...],
"connections": [...],
"tagsDictionary": [...]
}
`3. Local format (connections inside elements):
json
{
"name": "...",
"elements": [
{
"id": "1",
"title": "...",
"connections": [{"to": "2"}]
}
]
}
`4. Elements array only:
json
[
{"id": "1", "title": "...", "connections": [{"to": "2"}]}
]
`$3
Create new schema:
import_schema_from_json(
json_content: {...},
name: "My Schema"
)
Update existing schema:
import_schema_from_json(
json_content: {...},
schema_id: "existing-id"
)
Version History
Full version control for your schemas:
$3
List all versions
list_versions(schema_id: "xxx")View specific version
get_version(schema_id: "xxx", version_id: "yyy")Restore from version (auto-backup before restore)
restore_version(schema_id: "xxx", version_id: "yyy")Create manual checkpoint
create_version(schema_id: "xxx", comment: "Before refactoring")
- Auto-save: Every schema change creates a version automatically
- Manual checkpoints: Create named versions before important changes
- Safe restore: Current state is backed up before any restore
- 100 versions limit: Old auto-saves are cleaned, manual checkpoints are preserved
MIT