Drawio Impl Templates

Draw.io Template Implementation

Purpose

This skill enables correct use of Draw.io templates for starting new diagrams and creating reusable diagram templates. It prevents the most common mistake: rebuilding complex diagrams from scratch when a suitable template exists.

Critical Rules (Memorize These)

1. **ALWAYS use the standard ` wrapper** for template files — NEVER output bare ` when creating a reusable template.
2. ALWAYS include both structural cells (id="0" root and id="1" default parent) in every template.
3. ALWAYS use unique, descriptive cell IDs in templates — NEVER use numeric-only IDs like "2", "3". Use semantic IDs like "header", "process_1", "decision_auth".
4. ALWAYS include whiteSpace=wrap;html=1; in every shape style within a template.
5. NEVER hard-code user-specific content in templates — use placeholder text (e.g., "[Process Name]", "[Decision]") that signals replacement.
6. ALWAYS set grid="1" and guides="1" in the mxGraphModel attributes of every template.
7. NEVER embed images or external resources in templates — templates MUST be self-contained XML.

Template XML Structure

Full Template File (mxfile wrapper)

A reusable template MUST use the `` wrapper. This is the format Draw.io saves and loads:

Inline Diagram (mxGraphModel only)

For programmatic generation via MCP tools, use the bare ``:

Multi-Page Template

Templates MAY contain multiple pages. Each page is a separate ` element inside the `:

Each ` MUST have its own id and name attributes, and each MUST contain its own pair of structural cells (id="0" and id="1"`).

Built-in Template Categories

Draw.io ships with 150+ templates across these categories:

| Category | Contents | Typical Use | |----------|----------|-------------| | Basic | Simple flowcharts, grids, mind maps | General-purpose starting points | | Business | Org charts, value chains, SWOT analysis | Business process documentation | | Charts | Bar, pie, line charts | Data visualization | | Engineering | Circuit diagrams, floor plans | Technical schematics | | Flowcharts | Process flows, decision trees, swimlanes | Process modeling | | Mindmaps | Mind map layouts | Brainstorming, idea organization | | Mockups | Wireframes, UI mockups | User interface design | | Network | Network topology, rack diagrams | Infrastructure documentation | | Software | UML class, sequence, activity, ER diagrams | Software architecture | | Tables | Data tables, comparison grids | Structured data display | | Cloud | AWS, Azure, GCP architectures | Cloud infrastructure | | BPMN | Business process model notation | Formal process modeling | | Lean | Value stream maps, Kanban boards | Lean/Agile workflows | | Infographic | Timelines, statistics layouts | Visual communication | | Other | Miscellaneous templates | Specialized diagrams |

Decision Tree: Template Selection

What kind of diagram do you need?
  Process/workflow       --> Flowcharts category or BPMN category
  Organization chart     --> Business category
  Software architecture  --> Software category (UML, ER)
  Network topology       --> Network category
  Cloud infrastructure   --> Cloud category (AWS/Azure/GCP)
  Wireframe/UI           --> Mockups category
  Mind map               --> Mindmaps category
  Data visualization     --> Charts category
  None of the above      --> Build from scratch using other impl skills

Template Modification Pattern

The standard approach for using a template: keep the structure, swap the content.

Step 1: Start from Template Structure

Select the closest matching template. The template provides:

• Layout and positioning (geometry)
• Shape types and styles
• Connection patterns (edge routing)
• Page settings (size, grid, guides)

Step 2: Replace Placeholder Content

Update value attributes with actual content. NEVER change:

• Shape styles (unless explicitly required)
• Connection routing
• Coordinate relationships between shapes

Step 3: Add or Remove Shapes

When the template has more shapes than needed, remove unused cells AND their edges. When the template has fewer shapes than needed, duplicate existing cells with new IDs and adjusted coordinates.

Adding a Shape (Copy Pattern)

Removing a Shape

When removing a shape, ALWAYS also remove every edge that references its ID in source or target.

Creating Custom Templates

Reusable Template Checklist

1. Use the ` wrapper with host, modified, type` attributes.
2. Set a meaningful name attribute on the `` element.
3. Use placeholder text in value attributes (e.g., "[Title]", "[Description]").
4. Include consistent styling across all shapes.
5. Set page dimensions appropriate for the content (A4 landscape: 1169 x 827, A4 portrait: 827 x 1169).
6. Enable grid and guides: grid="1" gridSize="10" guides="1".
7. Use semantic cell IDs that describe the shape purpose.
8. Include all necessary edges with edgeStyle=orthogonalEdgeStyle.

Template Color Schemes

Use a consistent color scheme across all shapes in a template:

| Purpose | Fill Color | Stroke Color | |---------|-----------|-------------| | Primary shapes | #dae8fc (light blue) | #6c8ebf | | Secondary shapes | #d5e8d4 (light green) | #82b366 | | Warning/attention | #fff2cc (light yellow) | #d6b656 | | Error/danger | #f8cecc (light red) | #b85450 | | Neutral/info | #f5f5f5 (light gray) | #666666 | | Highlight | #e1d5e7 (light purple) | #9673a6 |

Page Size Reference

| Format | pageWidth | pageHeight | Orientation | |--------|-----------|-----------|-------------| | A4 Landscape | 1169 | 827 | Horizontal | | A4 Portrait | 827 | 1169 | Vertical | | Letter Landscape | 1100 | 850 | Horizontal | | Letter Portrait | 850 | 1100 | Vertical | | Infinite Canvas | Omit page attributes | - | Auto-expand |

Complete Example: Basic Flowchart Template

A reusable 5-step flowchart template with placeholders:

Complete Example: Org Chart Template

A 3-level organizational chart template:

Note: Org chart edges use endArrow=none — hierarchy is shown by position, not arrow direction.

MCP Integration

Opening a Template via MCP

Use the open_drawio_xml tool from the official Draw.io MCP server to open template XML in the editor:

Tool: open_drawio_xml
Input: { "xml": "..." }

Converting Mermaid to Template

Use open_drawio_mermaid to bootstrap a template from Mermaid syntax, then refine the generated XML:

Tool: open_drawio_mermaid
Input: { "mermaid": "graph TD\n  A[Start] --> B[Process]\n  B --> C{Decision}\n  C -->|Yes| D[End]" }

Checklist: Before Outputting a Template

1. Uses ` wrapper (for reusable templates) or ` (for inline use).
2. Both structural cells (id="0" and id="1") are present.
3. All shapes include whiteSpace=wrap;html=1; in their style.
4. Cell IDs are unique and semantic (not numeric).
5. Placeholder text uses bracket notation: [Placeholder].
6. Grid and guides are enabled in mxGraphModel attributes.
7. Page dimensions match the intended output format.
8. All edges have valid source and target attributes.
9. Color scheme is consistent across the template.
10. No hard-coded user-specific content.

Cross-References

• XML fundamentals: See drawio-core-xml-format for file structure and structural cells.
• Style syntax: See drawio-syntax-styles for the complete style property reference.
• Connection details: See drawio-syntax-connections for edge routing and waypoints.
• Flowcharts: See drawio-impl-flowcharts for flowchart-specific shapes and patterns.
• Geometry: See drawio-core-geometry for coordinate system and positioning.

Reference Links

• [Complete Reference](references/methods.md)
• [Working Examples](references/examples.md)
• [Anti-Patterns](references/anti-patterns.md)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Impertio-Studio
• Source: Impertio-Studio/Draw.io-Claude-Skill-Package
• License: MIT

Install and usage instructions live in the source repository linked above.