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).

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.

agentmods
npx agentmods add skills/boshi-xixixi/traeskill/drawio
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.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.svg" alt="Measured on agentmods" 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. Scan, not verified.
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 $0.00012 $0.00464
Sonnet 5 $0.00005 $0.00185
Haiku 4.5 $0.00002 $0.00093

Measured 2d ago against content hash b7ea3e77d64a, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, 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 2d 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. 2d 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 (261 stars, last pushed 3mo ago), licensed MIT. It adds 23 tokens to every session and 927 once invoked, about $0.0001 per session on Opus 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

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

resilient-context-extraction

Ensures agents extract data from context files with validation and fallback strategies before resorting to assumptions or external searches.

HKUDS/OpenSpace · 29 tokens

moai-docs-generation

Documentation generation patterns for technical specs, API docs, user guides, and knowledge bases using real tools like Sphinx, MkDocs, TypeDoc, and Nextra. Use when creating docs from code, building doc sites, or automating documentation workflows.

modu-ai/moai-adk · 56 tokens

report-generation

Creating structured PDF reports from data, templates, and AI-generated content using professional toolchains.

cosmicstack-labs/mercury-agent-skills · 20 tokens

graphic-ebook

Creates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF. 3–10 pages, 9 style presets, 11 page layout types. Trigger when user says "create an ebook", "design a lead magnet", "make a PDF guide", "build a gated content piece", "write a B2B ebook", "design a white paper", "create a…

Varnan-Tech/opendirectory · 97 tokens