Create diagrams as editable .drawio files and export them to PNG, SVG, or PDF with embedded diagram data for later editing. A bundled PNG export script uses the desktop app or a browser to render diagrams.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Generate draw.io diagrams as native .drawio files and export them to PNG images that can be embedded in Word documents.
mxGraphModel format for the requested diagram.drawio file using the create/edit file toolThis skill includes drawio-to-png.mjs, a Node.js export script with two rendering backends:
# 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>
| 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) |
| 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 |
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;" />
Try drawio first (works if on PATH), then fall back:
"C:\Program Files\draw.io\draw.io.exe"/Applications/draw.io.app/Contents/MacOS/draw.iodrawio (via snap/apt/flatpak)drawio -x -f png -e -b 10 -o <output.png> <input.drawio>
Flags: -x (export), -f (format), -e (embed diagram XML), -b (border), -o (output path).
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Map an existing codebase into seven documents covering its technology, structure, architecture, conventions, integrations, tests, and concerns. Link findings to file evidence, mark unknowns, and highlight differences between stated plans and the actual implementation.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Assess a repository’s readiness for AI agents with AgentRC and generate a standalone HTML dashboard. Review scores across nine areas, see prioritized improvements, and optionally apply scoring policies tailored to an organization.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Generate coding agent instruction files from a project's actual code using AgentRC. Capture detected languages, frameworks, and conventions in one shared file or split rules by topic and project area, with a preview before writing.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Customize AgentRC readiness assessments to match team or organization standards. Choose or create policies that adjust check importance, disable irrelevant checks, set pass thresholds, and define requirements for automated checks in CI workflows.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Analyze supplied ad performance data to identify wasted spend, strong campaigns, and next tests. Compare channels, assess whether test differences are meaningful, and produce budget reallocation recommendations with a prioritized action plan.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.
Turn code files into learning resources by adding comments that explain syntax, programming concepts, and design choices. Adjust explanation depth and repetition to the reader’s knowledge while preserving file structure, encoding, and syntax.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.