Drawio

Draw.io Skill

Create, edit, and export architecture, flowchart, and technical diagrams using Draw.io XML and Design System 2.0.

Steps

1. Parse the user's diagram request.

2. Design Consultation — When the request lacks explicit visual specifications (no theme, layout, or complexity stated), use AskUserQuestion to collect design intent across up to 4 dimensions in a single call:

   • Q1 — Target Audience & Use Case (single-select):

     • Academic paper / research report → suggests academic-color
     • Engineering doc / system architecture → suggests tech-blue
     • Presentation / slides → suggests dark
     • Developer reference / internal doc → suggests tech-blue

   • Q2 — Visual Style (single-select, with markdown previews showing color swatches):

     • tech-blue — Professional blue, ideal for architecture diagrams
     • academic-color — Colorful academic style, ideal for papers/research
     • dark — Dark presentation style, ideal for slides
     • nature — Natural green, ideal for lifecycle/process flows
     • academic — Grayscale print, ideal for IEEE submissions

   • Q3 — Layout Direction (single-select):

     • Horizontal (left → right) — recommended for pipelines/flows
     • Vertical (top → bottom) — recommended for API call stacks/hierarchies
     • Hierarchical (tree) — recommended for module organization/decision trees
     • Auto (let AI decide based on node count and relationships)

   • Q4 — Expected Complexity (single-select):

     • Simple (< 10 nodes, single page)
     • Medium (10–20 nodes, may need module grouping)
     • Complex (> 20 nodes — split into sub-diagrams recommended)

   Skip any question where the user has already specified the answer in their request. Store answers in a designIntent object to pre-configure the YAML meta section. Refer to $SKILL_DIR/references/docs/design-system/color-guide.md for theme selection rationale.

3. Read $SKILL_DIR/references/docs/design-system/README.md to understand the available themes, semantic shapes, and connector types.

4. Read $SKILL_DIR/references/docs/design-system/specification.md to understand the standard YAML specification format for this skill.

5. For reference, review pattern examples in $SKILL_DIR/references/examples/ if unsure about the syntax.

6. Generate the diagram YAML strictly following the specification.

   ⚠️ CRITICAL - Layout & Aesthetics: The built-in script layout engine is extremely basic and only outputs nodes in a straight line. Do NOT rely on layout: horizontal|vertical alone. You MUST explicitly calculate mental grid coordinates for each node and assign position: { x: ..., y: ... } fields in the YAML. Use geometric constraints (e.g. dx = 160, dy = 120 from the center) and consider routing paths for branches/loops to achieve a visually stunning, non-overlapping design.

7. Validate and compile the YAML into .drawio XML or .svg using the CLI tool:

   • node $SKILL_DIR/scripts/cli.js input.yaml output.drawio
   • node $SKILL_DIR/scripts/cli.js input.yaml --validate

8. Clean up: Delete the intermediate .yaml file after the diagram generation is complete to keep the workspace clean.

9. Explain to the user how to use MCP tools (e.g., drawio:start_session) if they want real-time preview (refer to $SKILL_DIR/references/docs/mcp-tools.md for tool usage).

Resources Distribution

• Knowledge & Docs: $SKILL_DIR/references/
• Static Graphics & Assets: $SKILL_DIR/assets/