# Drawio Impl Templates > > - **Type:** Skill - **Install:** `agentstack add skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-templates` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [Impertio-Studio](https://agentstack.voostack.com/s/impertio-studio) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [Impertio-Studio](https://github.com/Impertio-Studio) - **Source:** https://github.com/Impertio-Studio/Draw.io-Claude-Skill-Package/tree/main/skills/source/drawio-impl/drawio-impl-templates ## Install ```sh agentstack add skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-templates ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # 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: ```xml ``` ### Inline Diagram (mxGraphModel only) For programmatic generation via MCP tools, use the bare ``: ```xml ``` ### Multi-Page Template Templates MAY contain multiple pages. Each page is a separate `` element inside the ``: ```xml ``` 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) ```xml ``` ### 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: ```xml ``` ## Complete Example: Org Chart Template A 3-level organizational chart template: ```xml ``` 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](https://github.com/Impertio-Studio) - **Source:** [Impertio-Studio/Draw.io-Claude-Skill-Package](https://github.com/Impertio-Studio/Draw.io-Claude-Skill-Package) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-templates - Seller: https://agentstack.voostack.com/s/impertio-studio - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.