miro-diagram
Create Diagram on Miro Board
Create a diagram on the specified Miro board using the provided description.
Inputs
Identify from the user's request:
- board-url (required): Miro board URL (e.g.,
https://miro.com/app/board/uXjVK123abc=/) - description (required): What to diagram — natural language or Mermaid/PlantUML notation
Diagram Types
Automatically detect or let the user specify:
- flowchart - Processes, workflows, decision trees
- mindmap - Hierarchical ideas, brainstorming structures
- uml_class - Class diagrams, OOP relationships
- uml_sequence - Sequence diagrams, component interactions
- entity_relationship - Database schemas, ER diagrams
Workflow
- If board URL is missing, ask the user for it
- If description is missing or unclear, ask what they want to diagram
- Determine the appropriate diagram type from the description (or ask if ambiguous)
- (Optional, for precise control) Call
diagram_get_dslfirst to fetch the DSL spec — useful when the user wants a structurally complex diagram and you'd rather author the DSL directly than rely on natural language. - Call
diagram_createwith the board URL, the diagram description, and optionally the diagram type if specified. To place the diagram inside a frame, pass the board URL with?moveToWidget=<frame_id>— the tool detects the frame target automatically (noparent_idargument exists). When that URL is used,xandybecome coordinates relative to the frame's top-left corner. - Report success with a link to the board
Examples
User input: create a diagram on https://miro.com/app/board/abc= for the user login authentication flow
Action: Create a flowchart showing the user login authentication process.
User input: add a diagram of our e-commerce DB schema (users, products, orders, reviews) to https://miro.com/app/board/abc=
Action: Create an entity-relationship diagram for the e-commerce database.
User input: make a diagram on https://miro.com/app/board/abc=
Action: Ask the user what they want to diagram.
Tips for Better Diagrams
When crafting the description:
- Be specific about elements and their relationships
- Mention flow direction if important (top-down, left-right)
- Include decision points and conditions
- Name the key components clearly
For complex diagrams, suggest using Mermaid notation for precise control:
flowchart TD
A[Start] --> B{Valid Email?}
B -->|Yes| C[Send Verification]
B -->|No| D[Show Error]
C --> E[Wait for Confirm]
E --> F[Create Account]
Positioning
Two coordinate systems depending on whether the URL targets a frame:
- Board-level (URL has no
moveToWidget): Cartesian with the board center at(0, 0). Positive x goes right, positive y goes down. - Frame target (URL has
?moveToWidget=<frame_id>): coordinates are relative to the frame's top-left corner;(0, 0)is the frame's top-left. The diagram must fit within the frame's width and height. Targets that point at a non-frame item are silently ignored, so the diagram lands on the board.
Spacing recommendations when placing multiple items at the board level:
- Diagrams: 2000–3000 units apart
- Documents: 500–1000 units apart
- Tables: 1500–2000 units apart
When placing multiple items inside a single frame, fetch the frame's geometry first (e.g. via context_get with the frame URL) and lay them out in a grid that fits within the frame's width and height.
More from miroapp/miro-ai
miro-mcp
>-
235miro-platform
>-
82documentation-structure
Documentation architecture for this repository. Use when creating, updating, or reviewing README.md, CONTRIBUTING.md, or docs/ files. Covers separation of concerns, vendor documentation standards, cross-references, and validation.
69miro-code-review
Knowledge and patterns for effective code review visualization
61miro-spec-guide
>-
49miro-doc
Use when the user wants to create or edit a Google-Docs-style markdown document on a Miro board (meeting notes, project briefs, sprint plans, retros, decision logs).
3