[{"_1":2,"_286":-5,"_287":-5},"loaderData",{"_3":4,"_8":9,"_23":24},"root",{"_5":-5,"_6":7},"user","countable",true,"routes/_main",{"_5":-5,"_10":11},"recentPosts",[12,17,20],{"_13":14,"_15":16},"slug","claude-code-agent-teams","title","What Claude Code's Agent Teams Feature Does",{"_13":18,"_15":19},"claude-code-goal-command","How Claude Code's /goal Command Works",{"_13":21,"_15":22},"claude-code-routines-vs-loop","Claude Code Routines vs /loop: What's the Difference?","routes/creators.$handle",{"_25":26,"_27":26,"_28":29,"_30":31,"_32":33,"_283":31,"_284":285},"handle","jgraph","displayName","profileUrl","https://github.com/jgraph","verified",false,"skills",[34],{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_55":56,"_64":65,"_66":67,"_68":69,"_84":85,"_86":-5,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":-5,"_98":99,"_100":26,"_30":31,"_101":31,"_102":90,"_103":104,"_105":90,"_106":90,"_107":108,"_109":110,"_140":141,"_177":178,"_228":229,"_256":257,"_268":269,"_279":280,"_281":282},"id","gh__jgraph__drawio-mcp__plugins-claude-code-skills-drawio","draw-io-diagram-skill-jgraph","name","Draw.io Diagram Skill","canonicalName","drawio","tagline","Create and export diagrams using draw.io.","description","Always use when user asks to create, generate, draw, or design a diagram, flowchart, architecture diagram, ER diagram, sequence diagram, class diagram, network diagram, mockup, wireframe, or UI sketch, or mentions draw.io, drawio, drawoi, .drawio files, or diagram export to PNG/SVG/PDF.","longDescription","The Draw.io Diagram Skill allows users to generate diagrams in the native `.drawio` format, which can be exported to various formats such as PNG, SVG, and PDF. This skill supports two primary authoring methods: **Mermaid** and **draw.io XML**. Users can choose to create diagrams using concise Mermaid syntax, which is automatically laid out by the draw.io desktop CLI, or they can opt for XML for more precise control over styling and positioning. This flexibility caters to a variety of use cases, from simple flowcharts to complex architecture diagrams.\n\nFor users with the draw.io desktop CLI installed, the recommended approach is to use Mermaid for standard diagram types, as it simplifies the process and ensures a reliable layout. However, if the CLI is not available, users can still create diagrams directly in XML format, making the skill versatile and accessible. The skill also includes the option to utilize ELK for auto-layout of XML diagrams, enhancing the visual organization of complex diagrams.\n\nThe pipeline for generating diagrams is straightforward: diagrams are first authored as `.drawio` files, and then delivered in the requested format. This ensures consistency in the output, regardless of the authoring method used. The skill also provides options to generate a URL that opens the diagram directly in the draw.io editor, allowing for easy sharing and collaboration. Overall, this skill is designed for developers and designers who need to create and manipulate diagrams efficiently, whether for documentation, architecture planning, or UI design.","primaryCategory","design","subcategory","ui-ux","secondaryCategories",[54],"productivity","tags",[41,57,58,59,60,61,62,63],"mermaid","diagram","flowchart","export","xml","elk","cli","skillType","tool-wrapper","complexity","intermediate","platforms",[70,71,72,73,74,75,76,77,78,79,80,81,82,83],"claude-code","claude-api","codex-cli","cursor","antigravity","github-copilot","windsurf","opencode","cline","roo-code","goose","kiro","continue","trae","delivery","source-link","skillFileUrl","pricing","free","price",0,"thumbnailType","icon","thumbnailIcon","chart-bar","thumbnailColor","blue","thumbnailImageUrl","sellerId","gh__jgraph","sellerName","featured","downloads","views",4,"rating","reviewCount","status","active","metrics",{"_111":112,"_113":114,"_115":114,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139},"freshnessScore",100,"mirrorCount",3,"skillCountInRepo","qualityScore",85,"daysSinceUpdate",7,"popularityScore",75,"trustScore",60,"repoOpenIssues",8,"repoStars",5156,"repoWatchers",22,"repoContributors",6,"overallScore",80,"repoCreatedAt","2026-02-02T17:56:33Z","repoForks",318,"repoPushedAt","2026-08-03T20:10:27Z","source",{"_142":26,"_143":144,"_145":146,"_151":152,"_153":154,"_155":-5,"_149":156,"_157":158,"_159":152,"_160":31,"_161":162,"_163":164,"_170":171,"_172":7,"_173":174,"_175":176},"owner","repoUrl","https://github.com/jgraph/drawio-mcp","author",{"_28":29,"_147":148,"_38":26,"_25":26,"_149":150},"avatarUrl","https://github.com/jgraph.png","type","User","lastSyncedAt","2026-08-11T01:34:04.171Z","repo","drawio-mcp","commitSha","github","branch","main","firstSeenAt","isOfficial","path","plugins/claude-code/skills/drawio","license",{"_38":165,"_166":167,"_168":169},"Apache License 2.0","spdxId","Apache-2.0","url","https://github.com/jgraph/drawio-mcp/blob/main/LICENSE","sourceUpdatedAt","2026-08-03T19:51:43.000Z","redistributable","permalink","https://github.com/jgraph/drawio-mcp/blob/main/plugins/claude-code/skills/drawio/SKILL.md","repoFullName","jgraph/drawio-mcp","seo",{"_179":180,"_191":192,"_193":194,"_212":-5,"_213":214,"_220":221,"_222":223,"_224":225,"_226":227},"useCases",[181,185,188],{"_15":182,"_183":184},"Creating a Flowchart","body","Use Mermaid syntax to quickly generate a flowchart, leveraging the automatic layout feature of draw.io.",{"_15":186,"_183":187},"Exporting an Architecture Diagram","Design an architecture diagram using XML for precise control, then export it to PNG or PDF with embedded XML.",{"_15":189,"_183":190},"Collaborating on Diagrams","Generate a URL to open your diagram directly in the draw.io editor, facilitating easy sharing and collaboration.","whenNotToUse","This skill may not be suitable for users who require advanced diagramming features not supported by draw.io or those who prefer a fully graphical interface without coding.","faqs",[195,200,203,206,209],{"_196":197,"_198":199},"q","What types of diagrams can I create with this skill?","a","You can create a variety of diagrams including flowcharts, architecture diagrams, ER diagrams, sequence diagrams, and more using either Mermaid or XML.",{"_196":201,"_198":202},"Do I need the draw.io desktop CLI to use this skill?","While the skill can function without the CLI, using it allows for easier Mermaid diagram creation and auto-layout features for XML diagrams.",{"_196":204,"_198":205},"Can I export diagrams in different formats?","Yes, you can export diagrams to PNG, SVG, and PDF formats, all while keeping the XML embedded for future editing in draw.io.",{"_196":207,"_198":208},"What should I do if I don't have the CLI installed?","If the CLI is not installed, you can still create diagrams directly in XML format, which does not require the CLI.",{"_196":210,"_198":211},"How does the ELK layout feature work?","The ELK layout feature allows you to automatically position elements in XML-authored diagrams, ensuring a clean and organized layout without manual adjustments.","ogImageUrl","keywords",[215,216,217,218,219],"draw.io diagrams","generate diagrams","export to PNG","Mermaid syntax","draw.io XML","whenToUse","Use this skill when you need to generate diagrams for software architecture, flowcharts, or UI designs, especially if you are familiar with Mermaid syntax or need precise XML control.","metaTitle","Draw.io Diagram Skill - Create and Export Diagrams","problemSolved","This skill simplifies the process of creating and exporting diagrams, removing the need for manual diagramming tools.","metaDescription","Generate and export diagrams using draw.io with this powerful skill. Perfect for developers and designers.","content",{"_230":90,"_231":232,"_240":241,"_250":251,"_252":31,"_253":254,"_255":236},"bundledFiles","fileTree",[233],{"_161":234,"_235":236,"_149":237,"_238":239},"SKILL.md","size",20431,"file","language","markdown","codeExamples",[242,246,248],{"_238":243,"_244":245},"bash","snippet","drawio -x -f xml -o diagram.drawio diagram.mmd",{"_238":243,"_244":247},"drawio -x -f png -e -b 10 -o diagram.drawio.png diagram.drawio",{"_238":243,"_244":249},"drawio -x -f xml --layout verticalFlow -o diagram.drawio diagram.drawio","skillMd","# Draw.io Diagram Skill\n\nGenerate draw.io diagrams as native `.drawio` files. Author each diagram either as **Mermaid** (concise text that the draw.io desktop CLI converts and lays out for you) or as **draw.io XML** directly. Optionally auto-layout XML-authored diagrams with **ELK**, export to PNG/SVG/PDF with the diagram XML embedded (so the exported file stays editable in draw.io), or generate a browser URL that opens the diagram directly in the draw.io editor.\n\n## Authoring: Mermaid or XML?\n\nThe desktop CLI can convert Mermaid to a native `.drawio` file, so **prefer Mermaid** for the diagram types it handles well — its parser lays the diagram out automatically, which is far more reliable than hand-positioning cells in XML.\n\n| Author as | Best for | Needs desktop CLI? |\n|-----------|----------|--------------------|\n| **Mermaid** | Flowcharts, sequence, class, state, ER, gantt, mindmap, timeline, user journey, quadrant, C4, git graph, pie, and other standard types | Yes — to convert to `.drawio` |\n| **XML** | Custom styling, precise/hand positioning, specific shape libraries (AWS, Azure, network, UML detail…), or when the desktop CLI is not installed | No (optional ELK `--layout` needs the CLI) |\n\n- **Prefer Mermaid** when the desktop CLI is available and the request is one of the standard types above — write terse Mermaid and let draw.io lay it out.\n- **Use XML** for precise control, or as the universal fallback: XML needs no CLI at all, so it's the only option when the desktop app isn't installed (output a `.drawio` file or a `url`).\n- For XML-authored diagrams you can ask the CLI to apply an **ELK auto-layout** (`--layout`) instead of computing coordinates yourself — the same layouts the draw.io editor's *Arrange ▸ Layout* menu applies, and the same engine the draw.io MCP app server uses. See [ELK layout for XML](#elk-layout-for-xml).\n\nIf you're unsure whether the desktop CLI is present, detect it first (see [Locating the CLI](#locating-the-cli)). No CLI → author as XML and deliver a `.drawio` file or a `url`.\n\n## The pipeline\n\nEvery diagram becomes a native `.drawio` file first, then is delivered in the requested output format. This keeps the delivery step identical whether you authored Mermaid or XML.\n\n1. **Author → `.drawio`**\n - **Mermaid**: write the Mermaid to a `.mmd` file, then convert it with the CLI:\n ```bash\n drawio -x -f xml -o diagram.drawio diagram.mmd\n ```\n Delete the `.mmd` afterward — the `.drawio` is the artifact. draw.io's Mermaid parser has already laid the diagram out, so no `--layout` is needed.\n - **XML**: write the mxGraphModel XML to `diagram.drawio` (see [XML format](#xml-format)). Optionally apply an ELK layout (see [ELK layout for XML](#elk-layout-for-xml)).\n2. **Deliver** (identical for both sources):\n - *(no format)* → keep `diagram.drawio` and open it.\n - **png / svg / pdf** → export from the `.drawio` with embedded XML, then delete the source `.drawio`:\n ```bash\n drawio -x -f png -e -b 10 -o diagram.drawio.png diagram.drawio\n ```\n - **url** → build a browser URL from the `.drawio` XML, open it, and keep the `.drawio` as a local copy (see [Browser URL output](#browser-url-output)).\n3. **Open the result** — the exported file, the URL, or the `.drawio`. If the open command fails, print the absolute path (or URL) so the user can open it manually.\n\n**Always convert Mermaid to `.drawio` first, then export** — do not export a `.mmd` straight to an image. Direct Mermaid → PNG export with `-e` is broken in current draw.io Desktop (the embedded-XML step crashes); the two-step path (convert, then export the `.drawio`) is reliable and produces an editable embed. See [Troubleshooting](#troubleshooting).\n\nIf Mermaid was requested but no desktop CLI is available, fall back to authoring the same diagram directly as XML.\n\n## ELK layout for XML\n\nXML-authored diagrams can be auto-positioned by the CLI's `--layout` pass — the same ELK layouts as the editor's *Arrange ▸ Layout* menu and the same engine the draw.io MCP app server uses. Generate the cells with approximate (or even `0,0`) positions and let ELK place them; you only have to get the graph *structure* — nodes and edges — right.\n\nAdd `--layout ` to any CLI call that reads your XML. The simplest form lays out in place after you write the file (reading and overwriting the same path is supported):\n\n```bash\ndrawio -x -f xml --layout verticalFlow -o diagram.drawio diagram.drawio\n```\n\nOr combine layout with export in a single call (works for XML input):\n\n```bash\ndrawio -x -f png -e -b 10 --layout verticalFlow -o diagram.drawio.png diagram.drawio\n```\n\n### Layout presets\n\n| Name | Layout |\n|------|--------|\n| `verticalFlow` | Layered, top-to-bottom — flowcharts, pipelines |\n| `horizontalFlow` | Layered, left-to-right |\n| `verticalTree` | Tree, top-down — hierarchies, org charts |\n| `horizontalTree` | Tree, left-to-right |\n| `radialTree` | Radial tree |\n| `organic` | Force-directed — networks, mind-map-like graphs |\n\n### Custom layout JSON\n\nFor finer control, pass a JSON **array** (starting with `[`) instead of a preset name — the same format as the editor's custom-layout dialog:\n\n```bash\ndrawio -x -f xml --layout '[{\"layout\":\"elkLayered\",\"config\":{\"elk.direction\":\"RIGHT\"}}]' -o diagram.drawio diagram.drawio\n```\n\nEach entry is `{\"layout\": , \"config\": { … }}`:\n\n- **Algorithms**: `elkLayered`, `elkTree`, `elkRadial`, `elkOrganic`, `elkStress`, `elkBox`.\n- **`config`**: keys starting with `elk.` are ELK options — e.g. `elk.direction` (`UP` / `DOWN` / `LEFT` / `RIGHT`), `elk.spacing.nodeNode`, `elk.layered.spacing.nodeNodeBetweenLayers`. The keys `edgeStyle` (e.g. `orthogonal`) and `corners` (e.g. `rounded`) control connector rendering.\n\n### Orthogonal edge routing\n\n`--layout libavoid` routes the **edges** orthogonally around the shapes (the editor's *Arrange ▸ Layout ▸ Orthogonal Routing*) without moving any vertex — the complement of the node layouts above. Use it as an in-place pass on hand-positioned XML whose connectors cross shapes:\n\n```bash\ndrawio -x -f xml --layout libavoid -o diagram.drawio diagram.drawio\n```\n\nSkip it after a flow/tree preset — those already route their edges.\n\n**When to use it:** author the graph structure as XML without worrying about coordinates, then apply `verticalFlow` / `horizontalFlow` for flow-style diagrams or `organic` for networks. Mermaid-authored diagrams are already laid out — don't add `--layout`.\n\n## Mermaid syntax reference\n\nWhen authoring Mermaid, fetch and follow the shared Mermaid reference (all supported diagram types plus flowchart styling — `style`, `classDef`, `linkStyle`):\n\nhttps://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/mermaid-reference.md\n\nMatch the language of the diagram labels to the user's language.\n\n## Choosing the output format\n\nCheck the user's request for a format preference. Examples:\n\n- `/drawio:drawio create a flowchart` → Mermaid → `flowchart.drawio`\n- `/drawio:drawio png flowchart for login` → Mermaid → `login-flow.drawio.png`\n- `/drawio:drawio svg: ER diagram` → Mermaid → `er-diagram.drawio.svg`\n- `/drawio:drawio pdf AWS architecture overview` → XML (needs AWS shapes) → `architecture-overview.drawio.pdf`\n- `/drawio:drawio url flowchart for user login` → opens browser at `app.diagrams.net` with the diagram, keeps `login-flow.drawio` locally\n\nIf no format is mentioned, just produce the `.drawio` file and open it in draw.io. The user can always ask to export later.\n\n### Supported export formats\n\n| Format | Embed XML | Notes |\n|--------|-----------|-------|\n| `png` | Yes (`-e`) | Viewable everywhere, editable in draw.io |\n| `svg` | Yes (`-e`) | Scalable, editable in draw.io |\n| `pdf` | Yes (`-e`) | Printable, editable in draw.io |\n| `jpg` | No | Lossy, no embedded XML support |\n\nPNG, SVG, and PDF all support `--embed-diagram` — the exported file contains the full diagram XML, so opening it in draw.io recovers the editable diagram.\n\n## Browser URL output\n\nWhen the user requests `url` format, generate a draw.io URL that opens the diagram directly in the browser editor at `app.diagrams.net` — no draw.io Desktop required to *view* it. (Mermaid-authored diagrams still need the desktop CLI to convert to `.drawio` first; if no CLI is available, author the diagram as XML and build the URL from that.)\n\n### How it works\n\n1. The `.drawio` file is written to disk as usual (gives the user a persistent local copy they can re-edit)\n2. The XML is compressed with Node.js's built-in `zlib` and base64-encoded\n3. The result is embedded in a `https://app.diagrams.net/#create=...` URL\n4. The URL is opened in the default browser\n\nThis uses only Node.js built-in modules (`zlib`, `child_process`) — no external dependencies.\n\n### URL generation\n\nRun this `node -e` one-liner to read the `.drawio` file and print the URL (replace `DIAGRAM.drawio` with the actual filename):\n\n```bash\nURL=$(node -e '\nconst fs = require(\"fs\");\nconst zlib = require(\"zlib\");\nconst xml = fs.readFileSync(process.argv[1], \"utf8\");\nconst compressed = zlib.deflateRawSync(encodeURIComponent(xml)).toString(\"base64\");\nconst payload = encodeURIComponent(JSON.stringify({ type: \"xml\", compressed: true, data: compressed }));\nconsole.log(\"https://app.diagrams.net/?grid=0&pv=0&border=10&edit=_blank#create=\" + payload);\n' \"DIAGRAM.drawio\")\n```\n\nThe URL format matches the MCP Tool Server. Node.js's `zlib.deflateRawSync` and `pako.deflateRaw` both implement RFC 1951 and produce identical output, so URLs from either source are interchangeable.\n\n### Opening the URL\n\n| Environment | Command |\n|-------------|---------|\n| macOS | `open \"$URL\"` |\n| Linux (native) | `xdg-open \"$URL\"` |\n| WSL2 | Write a temp `.url` file, open via `cmd.exe` (see below) |\n| Windows (native) | Write a temp `.url` file, open via `start` (see below) |\n\n**Why the `.url` workaround on Windows/WSL2?** `cmd.exe`'s `start` command treats `&` as a command separator and strips everything after `#` in URLs. The diagram payload lives in the `#create=...` fragment, so passing the URL directly causes it to be silently lost. A `.url` shortcut file preserves the URL intact.\n\n**macOS / Linux example:**\n\n```bash\nopen \"$URL\" # macOS\nxdg-open \"$URL\" # Linux\n```\n\n**WSL2 example:**\n\n```bash\nTMPFILE=$(mktemp --suffix=.url)\nprintf '[InternetShortcut]\\r\\nURL=%s\\r\\n' \"$URL\" > \"$TMPFILE\"\ncmd.exe /c start \"\" \"$(wslpath -w \"$TMPFILE\")\"\n```\n\n**Windows (native) example:**\n\nDo **not** build the `.url` file with `echo URL=%URL%`. The generated URL contains `&` characters (`?grid=0&pv=0&...`) that `cmd.exe` treats as command separators, so the shortcut is written truncated and the diagram payload is lost — the exact failure the `.url` file is meant to prevent. Let Node write the file directly (it already holds the URL string) and open only the resulting path, which never contains `&`:\n\n```bash\nTMPFILE=$(node -e '\nconst fs = require(\"fs\");\nconst os = require(\"os\");\nconst path = require(\"path\");\nconst p = path.join(os.tmpdir(), \"drawio.url\");\nfs.writeFileSync(p, \"[InternetShortcut]\\r\\nURL=\" + process.argv[1] + \"\\r\\n\");\nprocess.stdout.write(p);\n' \"$URL\")\ncmd.exe /c start \"\" \"$TMPFILE\"\n```\n\n### After opening\n\nPrint the URL so the user can copy or share it, and confirm the local file path:\n\n```\nOpened in browser: \nLocal file: DIAGRAM.drawio\n```\n\nThe `.drawio` file stays on disk so the user can re-edit it later, attach it elsewhere, or export it to an image format on demand.\n\n### URL length\n\nThe URL embeds the full compressed diagram in its hash fragment. Very large diagrams may hit browser URL length limits (typically ~32K–2MB depending on the browser). For complex diagrams that exceed the limit, fall back to writing the `.drawio` file and opening it locally.\n\n## draw.io CLI\n\nThe draw.io desktop app includes a command-line interface used for **converting Mermaid** to `.drawio`, applying **ELK layouts** (`--layout`), and **exporting** to PNG/SVG/PDF. All three require the desktop app to be installed.\n\n### Locating the CLI\n\nFirst, detect the environment, then locate the CLI accordingly:\n\n#### WSL2 (Windows Subsystem for Linux)\n\nWSL2 is detected when `/proc/version` contains `microsoft` or `WSL`:\n\n```bash\ngrep -qi microsoft /proc/version 2>/dev/null && echo \"WSL2\"\n```\n\nOn WSL2, use the Windows draw.io Desktop executable via `/mnt/c/...`:\n\n```bash\nDRAWIO_CMD=\"/mnt/c/Program Files/draw.io/draw.io.exe\"\n```\n\nDouble-quote the path so the space in `Program Files` is treated as part of the path. Do **not** wrap it in backticks — in bash, backticks are command substitution, which would try to *execute* the binary at locate-time instead of storing its path.\n\nIf draw.io is installed in a non-default location, check common alternatives:\n\n```bash\n# Default install path\n\"/mnt/c/Program Files/draw.io/draw.io.exe\"\n\n# Per-user install (if the above does not exist)\n\"/mnt/c/Users/$WIN_USER/AppData/Local/Programs/draw.io/draw.io.exe\"\n```\n\n#### macOS\n\n```bash\n/Applications/draw.io.app/Contents/MacOS/draw.io\n```\n\n#### Linux (native)\n\n```bash\ndrawio # typically on PATH via snap/apt/flatpak\n```\n\n#### Windows (native, non-WSL2)\n\n```\n\"C:\\Program Files\\draw.io\\draw.io.exe\"\n```\n\nUse `which drawio` (or `where draw.io` on Windows) to check if it's on PATH before falling back to the platform-specific path.\n\n### Convert / layout / export commands\n\n**Convert Mermaid to `.drawio`:**\n\n```bash\ndrawio -x -f xml -o diagram.drawio diagram.mmd\n```\n\n**Apply an ELK layout to XML** (see [ELK layout for XML](#elk-layout-for-xml)):\n\n```bash\ndrawio -x -f xml --layout verticalFlow -o diagram.drawio diagram.drawio\n```\n\n**Export to an image format:**\n\n```bash\ndrawio -x -f -e -b 10 -o \"\" \"\"\n```\n\n**WSL2 export example:**\n\n```bash\n\"/mnt/c/Program Files/draw.io/draw.io.exe\" -x -f png -e -b 10 -o \"diagram.drawio.png\" \"diagram.drawio\"\n```\n\nKey flags:\n- `-x` / `--export`: export mode (also used for Mermaid conversion and layout passes)\n- `-f` / `--format`: output format (`xml`, png, svg, pdf, jpg) — use `xml` to produce a `.drawio` from Mermaid or a layout pass\n- `--layout`: run a layout before writing the output — an ELK preset name, the `libavoid` edge-routing pass, or a custom-layout JSON array\n- `--mermaid-image 1`: convert Mermaid to a single static SVG image cell (the Mermaid source stays on the cell for re-editing) instead of an editable diagram — only when the user explicitly asks for a non-editable image cell\n- `-e` / `--embed-diagram`: embed diagram XML in the output (PNG, SVG, PDF only)\n- `-o` / `--output`: output file path\n- `-b` / `--border`: border width around diagram (default: 0)\n- `-t` / `--transparent`: transparent background (PNG only)\n- `-s` / `--scale`: scale the diagram size\n- `--width` / `--height`: fit into specified dimensions (preserves aspect ratio)\n- `-a` / `--all-pages`: export all pages (PDF only)\n- `-p` / `--page-index`: select a specific page (1-based)\n\n### Opening the result\n\n| Environment | Command |\n|-------------|---------|\n| macOS | `open ` |\n| Linux (native) | `xdg-open ` |\n| WSL2 | `cmd.exe /c start \"\" \"$(wslpath -w )\"` |\n| Windows | `start ` |\n\n**WSL2 notes:**\n- `wslpath -w ` converts a WSL2 path (e.g. `/home/user/diagram.drawio`) to a Windows path (e.g. `C:\\Users\\...`). This is required because `cmd.exe` cannot resolve `/mnt/c/...` style paths.\n- The empty string `\"\"` after `start` is required to prevent `start` from interpreting the filename as a window title.\n\n**WSL2 example:**\n\n```bash\ncmd.exe /c start \"\" \"$(wslpath -w diagram.drawio)\"\n```\n\n## File naming\n\n- Use a descriptive filename based on the diagram content (e.g., `login-flow`, `database-schema`)\n- Use lowercase with hyphens for multi-word names\n- When authoring Mermaid, write it to a matching `.mmd` file, convert to `.drawio`, then delete the `.mmd` — the `.drawio` is the artifact\n- For export, use double extensions: `name.drawio.png`, `name.drawio.svg`, `name.drawio.pdf` — this signals the file contains embedded diagram XML\n- After a successful export, delete the intermediate `.drawio` file — the exported file contains the full diagram\n- For `url` mode, keep the `.drawio` file (no double extension) — the URL is a view/edit handle and the local file is the persistent copy\n\n## XML format\n\nA `.drawio` file is native mxGraphModel XML. When authoring as XML, generate it directly; Mermaid is converted to this same format by the CLI (`-f xml`), so both authoring routes end up as a native `.drawio`.\n\n### Basic structure\n\nEvery diagram must have this structure:\n\n```xml\n\n \n \n \n \n \n\n```\n\n- Cell `id=\"0\"` is the root layer\n- Cell `id=\"1\"` is the default parent layer\n- All diagram elements use `parent=\"1\"` unless using multiple layers\n\n(The example above uses an XML comment only to point out where cells go — never emit comments in real output; see [XML well-formedness](#critical-xml-well-formedness).)\n\n## XML reference\n\nFor the complete draw.io XML reference including common styles, edge routing, containers, layers, tags, metadata, dark mode colors, and XML well-formedness rules, fetch and follow the instructions at:\nhttps://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/xml-reference.md\n\n## Troubleshooting\n\n| Problem | Cause | Solution |\n|---------|-------|----------|\n| draw.io CLI not found | Desktop app not installed or not on PATH | Author as XML and deliver a `.drawio` file or `url` (Mermaid conversion, ELK layout, and image export all need the desktop app). Tell the user they can install the draw.io desktop app to enable those |\n| Mermaid → PNG export crashes | Direct `.mmd` → PNG with `-e` is broken in current draw.io Desktop (embedded-XML step) | Use the two-step path: convert Mermaid to `.drawio` first (`-f xml`), then export the `.drawio` to PNG — the intermediate file embeds correctly |\n| Blank diagram from Mermaid | Misspelled type keyword, or a syntax error (bad node ID, unquoted label) | Check the [Mermaid reference](#mermaid-syntax-reference); the first non-directive line's keyword selects the diagram type |\n| Layout does nothing / errors | Unknown preset name, custom JSON not an array, or a desktop build too old for `--layout` / `.mmd` input | Use a preset from [Layout presets](#layout-presets) or a JSON array starting with `[`; on an old desktop build, author as XML with explicit positions and tell the user updating draw.io Desktop enables Mermaid conversion and layouts |\n| Export produces empty/corrupt file | Invalid XML (e.g. double hyphens in comments, unescaped special characters) | Validate XML well-formedness before writing; see the XML well-formedness section below |\n| Diagram opens but looks blank | Missing root cells `id=\"0\"` and `id=\"1\"` | Ensure the basic mxGraphModel structure is complete |\n| Edges not rendering | Edge mxCell is self-closing (no child mxGeometry element) | Every edge must have `` as a child element |\n| File won't open after export | Incorrect file path or missing file association | Print the absolute file path so the user can open it manually |\n| Browser opens with empty diagram in `url` mode | `cmd.exe` stripped the `#create=...` fragment | Use the `.url` temp-file workaround on Windows/WSL2 (see [Opening the URL](#opening-the-url)) — never pass the URL directly to `cmd.exe /c start` |\n| URL is too long for the browser | Very large diagram exceeds browser URL length limit | Fall back to writing the `.drawio` file and opening it locally |\n\n## CRITICAL: XML well-formedness\n\n- **NEVER include ANY XML comments (``) in the output.** XML comments are strictly forbidden — they waste tokens, can cause parse errors, and serve no purpose in diagram XML.\n- Escape special characters in attribute values: `&`, `<`, `>`, `"`\n- Always use unique `id` values for each `mxCell`","skillMdTruncated","frontmatter",{"_38":41,"_44":45},"totalSizeBytes","runtime",{"_258":7,"_259":7,"_260":-5,"_261":31,"_262":31,"_263":31,"_264":265,"_266":267},"requiresBash","requiresMcp","model","requiresNode","requiresNetwork","requiresPython","allowedTools",[],"dependencies",[],"install",{"_63":270,"_271":272,"_273":274,"_275":276,"_277":278},"npx skills add jgraph/drawio-mcp/drawio","coordinate","jgraph/drawio-mcp/drawio","browseUrl","https://github.com/jgraph/drawio-mcp/tree/main/plugins/claude-code/skills/drawio","downloadUrl","https://github.com/jgraph/drawio-mcp/archive/refs/heads/main.zip","gitUrl","https://github.com/jgraph/drawio-mcp.git","createdAt","2026-08-11T01:34:08.216Z","updatedAt","2026-08-13T11:40:32.695Z","hasNext","page",1,"actionData","errors"]