drawio

drawio is a skill for Claude Code, Codex from boshi-xixixi/TraeSkill. It costs 23 tokens per session (927 once invoked), scanned C, original, MIT.

A tool for generating native draw.io diagram files and exporting them as PNG, SVG, or PDF images.

In plain words
What is it for?
Use it to create visual documentation such as flowcharts, system diagrams, and data models, then export them for other tools.
Why use it?
It provides editable diagrams alongside image files that can be shared or placed in documents.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: installed under .agents/ (shared by several agents).

Good fit Use it to create visual documentation such as flowcharts, system diagrams, and data models, then export them for other tools.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/boshi-xixixi/traeskill/drawio
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add boshi-xixixi/TraeSkill --skill drawio
Clone the repo
git clone --depth 1 https://github.com/boshi-xixixi/TraeSkill

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for drawio

README.md
[![agentmods](https://agentmods.dev/badge/skills/boshi-xixixi/traeskill/drawio/github.svg)](https://agentmods.dev/skills/boshi-xixixi/traeskill/drawio)
Your own site
<a href="https://agentmods.dev/skills/boshi-xixixi/traeskill/drawio"><img src="https://agentmods.dev/badge/skills/boshi-xixixi/traeskill/drawio/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for drawio

Your own site · 80×15
<a href="https://agentmods.dev/skills/boshi-xixixi/traeskill/drawio"><img src="https://agentmods.dev/badge/skills/boshi-xixixi/traeskill/drawio.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 23 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 927 The whole file, excluding the scripts and references it only reads on demand.
Security scan C 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00023 $0.00927
Opus 5.5 $0.00009 $0.00371
Sonnet 5.5 $0.00005 $0.00185
Haiku 4.5 $0.00002 $0.00093

Measured 1mo ago against content hash b7ea3e77d64a, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade C, and why

drawio scanned grade C with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/drawio-to-png.mjs), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Hidden instructionshighPrompt injection

Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.

<!-- External system -->
.trae/Skills/.agents/skills/drawio/SKILL.md · 97 lines

How it starts

The opening of the file, as written. The whole thing — 97 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Draw.io Diagram Skill

Generate draw.io diagrams as native .drawio files and export them to PNG images that can be embedded in Word documents.

How to Create a Diagram

  1. Generate draw.io XML in mxGraphModel format for the requested diagram
  2. Write the XML to a .drawio file using the create/edit file tool
  3. Export to PNG using the bundled export script

Bundled Export Script

This skill includes drawio-to-png.mjs, a Node.js export script with two rendering backends:

  1. draw.io CLI (pixel-perfect, fastest) — used automatically if draw.io desktop is installed
  2. Official draw.io viewer in headless browser (pixel-perfect, needs Chromium/Edge) — fallback when CLI is unavailable

Usage

# Install dependencies (one-time, from the scripts folder)
cd skills/drawio/scripts && npm install

# Export a single diagram
node skills/drawio/scripts/drawio-to-png.mjs <input.drawio> [output.png]

# Export all .drawio files in a directory
node skills/drawio/scripts/drawio-to-png.mjs --dir <directory>

# Force a specific renderer
node skills/drawio/scripts/drawio-to-png.mjs --renderer=cli|viewer|auto <input.drawio>

Skill Folder Contents

File Purpose
SKILL.md This instruction file
scripts/drawio-to-png.mjs Node.js export script (CLI + browser fallback)
scripts/package.json Dependencies (puppeteer-core)

Supported Export Formats

Format Embed XML Notes
png Yes Viewable everywhere, editable in draw.io
svg Yes Scalable, editable in draw.io
pdf Yes Printable, editable in draw.io

Draw.io XML Style Conventions

Use these styles for consistent, professional diagrams:

<!-- Primary service (highlighted) -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;strokeWidth=2;arcSize=12;shadow=1;" />

<!-- External system -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" />

<!-- Success/processing stage -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" />

<!-- Warning/quality gate -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />

<!-- Error/failure path -->
<mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" />

<!-- Data store (cylinder) -->
<mxCell style="shape=cylinder3;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" />

<!-- Arrow -->
<mxCell style="edgeStyle=orthogonalEdgeStyle;rounded=1;strokeColor=#6c8ebf;strokeWidth=2;" />

Read the full file on GitHub · 97 lines

Files

What ships with it

2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 1mo ago First seen · 97 lines · 23 tokens per session scan C b7ea3e77d64a

Subscribe to this mod's changes

drawio is a skill published in the GitHub repository boshi-xixixi/TraeSkill (278 stars, last pushed 5mo ago), licensed MIT. It adds 23 tokens to every session and 927 once invoked, about $0.0001 per session on Opus 5.5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

adobe-design-to-pdf

Find an Adobe Express template, customize its text or background color, and turn it into a print-ready PDF, packet, or shareable link. Use whenever the user asks to make a flyer, poster, banner, brochure, sign, or other print piece and mentions PDF, printing, a packet, or sharing — for example, “make me a flyer and…

adobe/skills · 160 tokens

design-drawing-svg-md

Use when converting vector PDF engineering drawings (steel-structure shop drawings, A0 drawings, linework-only PDFs without a text layer) into LLM-consumable dual-carrier records — semantic Markdown reading thread plus layered SVG geometry archive linked by shared IDs and crosswalk.

znlgis/opengis-skills · 61 tokens

huashu-md-to-pdf

Convert Markdown documents into professional Apple-style PDF white papers. Supports full Markdown syntax (code blocks, tables, blockquotes, lists, etc.). Auto-generates cover page, table of contents, and headers/footers. Use cases: technical documentation, white papers, tutorials, reports — any Markdown document…

Biraj2004/huashu-skills-english · 73 tokens

akf-trust-metadata

The AI native file format. EXIF for AI — stamps every file with trust scores, source provenance, and compliance metadata. Embeds into 20+ formats (DOCX, PDF, images, code). EU AI Act, SOX, HIPAA aud.

ranbot-ai/awesome-skills · 59 tokens

pdf

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and…

Bosh-Kuo/awesome-agent-toolkit · 92 tokens

office-transform

Extract or edit a selection from xlsx, docx, pdf, or pptx into a new file; the source is never modified.

CherryHQ/cherry-studio · 31 tokens