Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Visually verify graphviz2drawio conversion fidelity by rendering a Graphviz source as both native Graphviz PNG and converted draw.io PNG, then inspecting the images.
Install Compare Render
$ npx skills add hbmartin/graphviz2drawio --skill compare-render -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install hbmartin/graphviz2drawio compare-render --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/hbmartin/graphviz2drawio.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/compare-render .claude/skills/compare-render && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "compare-render" agent skill from https://github.com/hbmartin/graphviz2drawio/tree/master/.codex/skills/compare-render into .claude/skills/compare-render/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compare-render", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/hbmartin/graphviz2drawio/tree/master/.codex/skills/compare-renderType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add hbmartin/graphviz2drawio --skill compare-render -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install hbmartin/graphviz2drawio compare-render --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hbmartin/graphviz2drawio.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.codex/skills/compare-render .agents/skills/compare-render && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "compare-render" agent skill from https://github.com/hbmartin/graphviz2drawio/tree/master/.codex/skills/compare-render into .agents/skills/compare-render/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compare-render", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hbmartin/graphviz2drawio --skill compare-render -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install hbmartin/graphviz2drawio compare-render --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hbmartin/graphviz2drawio.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.codex/skills/compare-render .cursor/skills/compare-render && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "compare-render" agent skill from https://github.com/hbmartin/graphviz2drawio/tree/master/.codex/skills/compare-render into .cursor/skills/compare-render/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compare-render", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/hbmartin/graphviz2drawio.git --path .codex/skills/compare-render--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add hbmartin/graphviz2drawio --skill compare-render -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install hbmartin/graphviz2drawio compare-render --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hbmartin/graphviz2drawio.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.codex/skills/compare-render .gemini/skills/compare-render && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "compare-render" agent skill from https://github.com/hbmartin/graphviz2drawio/tree/master/.codex/skills/compare-render into .gemini/skills/compare-render/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compare-render", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install hbmartin/graphviz2drawio compare-renderInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add hbmartin/graphviz2drawio --skill compare-render -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/hbmartin/graphviz2drawio.git skills-src && mkdir -p .github/skills && cp -r skills-src/.codex/skills/compare-render .github/skills/compare-render && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "compare-render" agent skill from https://github.com/hbmartin/graphviz2drawio/tree/master/.codex/skills/compare-render into .github/skills/compare-render/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compare-render", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hbmartin/graphviz2drawio --skill compare-render -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install hbmartin/graphviz2drawio compare-render --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hbmartin/graphviz2drawio.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.codex/skills/compare-render .opencode/skills/compare-render && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "compare-render" agent skill from https://github.com/hbmartin/graphviz2drawio/tree/master/.codex/skills/compare-render into .opencode/skills/compare-render/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "compare-render", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
compare-render- GitHub stars
- 275
- Token cost
- ~1.2k tokens
- SKILL.md length
- 413 words
- Files
- 2
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- GPL-3.0
At a glance
Visually verify graphviz2drawio conversion fidelity by rendering a Graphviz source as both native Graphviz PNG and converted draw.io PNG, then inspecting the images.
- Works in 6 steps: Work from the repo root → Pick 1-3 relevant Graphviz inputs under… → Render the comparison → …
- Modifying graphviz2drawio conversion
- SKILL.md covers Purpose, Core Workflow, Choosing Inputs and Broader Regression Checks, plus 2 more sections
- Calls uv
What it does
Compare Render is an agent skill from hbmartin/graphviz2drawio. Visually verify graphviz2drawio conversion fidelity by rendering a Graphviz source as both native Graphviz PNG and converted draw.io PNG, then inspecting the images. Use when modifying graphviz2drawio conversion or rendering code, updating specs, fixing layout, style, text, edge, or cluster bugs, or answering whether converted output looks right, improved, or regressed. Always perform a visual check before declaring conversion changes done.
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Development. It works with draw.io. The repository describes itself as: Convert graphviz (dot) files to draw.io / lucid (mxGraph) format. Beautiful and editable graphs in your favorite editor. The licence is GPL-3.0.
When your agent uses it
- Modifying graphviz2drawio conversion
- Answering whether converted output looks right
Example prompts
- “/compare-render”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Work from the repo root
- Pick 1-3 relevant Graphviz inputs under test/. Prefer one small focused case and, when risk is broader, one stress or integration case.
- Render the comparison
- Inspect both PNGs with Codex image tooling. Prefer view_image and pass absolute paths, for example
- Compare deliberately
- Report concrete observations and a clear fidelity verdict. Name specific visible matches or differences; do not summarize as only "looks…
What it can do on your machine
Read from SKILL.md and the folder at commit 96c691c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
uv
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use uv, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Compare Render loads about 1.2k tokens when it runs. Until then it costs about 115 tokens; SKILL.md has 413 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from hbmartin/graphviz2drawio at commit 96c691c, republished under its GPL-3.0 licence (© hbmartin). 413 words, ~1,243 tokens.
Download SKILL.mdSave it as
.claude/skills/compare-render/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- compare-render
- description
- Visually verify graphviz2drawio conversion fidelity by rendering a Graphviz source as both native Graphviz PNG and converted draw.io PNG, then inspecting the images. Use when modifying graphviz2drawio conversion or rendering code, updating specs, fixing layout, style, text, edge, or cluster bugs, or answering whether converted output looks right, improved, or regressed. Always perform a visual check before declaring conversion changes done.
Compare Render
Purpose
Use this repo-specific workflow for /Users/haroldmartin/Downloads/graphviz2drawio. Correctness is visual: the draw.io render should match Graphviz's own render, and XML diffs or unit checks can miss visible regressions.
Do not create bundled helper scripts for this skill. Use the repository scripts already present under scripts/.
Core Workflow
Work from the repo root:
bash cd /Users/haroldmartin/Downloads/graphviz2drawioPick 1-3 relevant Graphviz inputs under
test/. Prefer one small focused case and, when risk is broader, one stress or integration case.Render the comparison:
bash ./scripts/compare_render.sh test/directed/hello.gv.txt tmp_render/helloThis writes:
<base>_graphviz.png: Graphviz reference rendered bydot<base>_drawio.png: converted draw.io XML exported as PNG<base>.xml: intermediate draw.io XML
Inspect both PNGs with Codex image tooling. Prefer
view_imageand pass absolute paths, for example:text /Users/haroldmartin/Downloads/graphviz2drawio/tmp_render/hello/hello_graphviz.png /Users/haroldmartin/Downloads/graphviz2drawio/tmp_render/hello/hello_drawio.pngCompare deliberately:
- Overall layout: node positions and relative arrangement
- Node geometry: shapes, sizes, fills, borders, and colors
- Edges: routing, curvature, attachment points, arrowheads, and direction
- Labels: text content, placement, font size, and edge-label placement
- Clusters/subgraphs: bounding boxes and whether they enclose the right nodes
Report concrete observations and a clear fidelity verdict. Name specific visible matches or differences; do not summarize as only "looks good".
Choosing Inputs
| Feature area | Good inputs |
|---|---|
| Minimal smoke test | test/directed/hello.gv.txt |
| Node shapes and polygons | test/directed/fsm.gv.txt, test/directed/switch.gv.txt |
| Clusters and subgraphs | test/directed/cluster.gv.txt, test/directed/compound.gv.txt, test/directed/subgraph_multiple.gv.txt |
| Colors | test/directed/Twelve_colors.gv.txt |
| Gradients | test/gradient/colors.gv.txt, test/gradient/radial_angle.gv.txt |
| Edge routing and curves | test/undirected/polylines.gv.txt, test/undirected/polylines_curved.gv.txt |
| Ports | test/directed/port.gv.txt |
| Labels and multi-labels | test/directed/multilabel.gv.txt, test/directed/tooltip.gv.txt |
| Records and HTML tables | test/directed/datastruct.gv.txt, test/directed/UML_Class_diagram.gv.txt, test/directed/subgraph_with_tables.gv.txt |
| Radial layouts | test/twopi/twopi2.gv.txt, test/undirected/networkmap_twopi.gv.txt |
| Large or stress graphs | test/directed/Linux_kernel_diagram.gv.txt, test/directed/world.gv.txt |
Show full SKILL.md (172 more words)Show less
Broader Regression Checks
When specs changed or the implementation touches shared layout, style, labels, edges, or XML generation, run the textual spec check:
uv run ./scripts/test_specs.sh test tmp_outTreat diffs as evidence to inspect, not automatic failure. If the new output is intentionally better, update specs through the repo's normal process.
For changed specs, render before/new/reference trios:
./scripts/render_specs.sh test specs tmp_renderInspect generated _new.png, _old.png, and _reference.png files with view_image before claiming the new render improves fidelity.
Failure Handling
- If
compare_render.shreports missingdot, draw.io CLI, oruv, report the exact missing dependency and stop the visual verdict. - If the draw.io PNG is blank or missing, inspect the generated XML before assuming the renderer is wrong.
- Keep generated output in
tmp_render/ortmp_out/; those paths are gitignored and should not be committed.
Forward-Test Prompts
Use these realistic prompts when validating changes to this skill:
Use $compare-render at /Users/haroldmartin/Downloads/graphviz2drawio/.codex/skills/compare-render to check test/directed/cluster.gv.txt and report what differs visually.Use $compare-render at /Users/haroldmartin/Downloads/graphviz2drawio/.codex/skills/compare-render to investigate whether arrowheads look wrong in test/directed/fsm.gv.txt.Use $compare-render at /Users/haroldmartin/Downloads/graphviz2drawio/.codex/skills/compare-render to verify edge routing fidelity for test/undirected/polylines.gv.txt and test/undirected/polylines_curved.gv.txt.
© hbmartin, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in .codex/skills/compare-render of hbmartin/graphviz2drawio.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit 96c691c
Compare with similar skills
Compare Render next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Compare Render this skillhbmartin/graphviz2drawio | 275 | — | ~1.2k | Automated safety check: Pass | GPL-3.0 | |
| Diagram Designcathrynlavery/diagram-design | 45k | 1 repos | ~7.5k | Automated safety check: Pass | MIT | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Draw.io Diagram ReconstructionHKUSTDial/Supervisor-Skills | 8.5k | — | ~5.4k | Automated safety check: Pass | MIT | |
| Scibox Diagramjihe520/sci-box | 248 | 1 repos | ~983 | Automated safety check: Notes | None | |
| Drawio Diagram BuilderWill-hxw/drawio-diagram-builder | 412 | — | ~5.9k | Automated safety check: Pass | MIT |
Similar skills
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
Draw.io Diagram Reconstruction
HKUSTDial/Supervisor-Skills
Rebuilds a reference diagram image as an editable, high-fidelity Draw.io file, mixing native elements, SVG icons and cropped PNGs, with a batch workflow for a folder of images.
Scibox Diagram
jihe520/sci-box
制作与修改可编辑的 draw.io / diagrams.net 示意图（.drawio XML），产出 .drawio + PNG/PDF。三条路径：套用内置模板（五带技术路线图、三栏研究框架图、三栏阶段流程图、横版任务流水线图）、从零手写…
Drawio Diagram Builder
Will-hxw/drawio-diagram-builder
Create, edit, replicate, and iteratively refine editable research and technical diagrams in diagrams.net/draw.io (.drawio XML) from prompts, papers, repositories, screenshots, or existing diagrams.
Drawio Azure
sparklabx/drawio-ai-kit
A skill your agent uses when the user asks for an Azure architecture diagram — VNet/networking, App Service, AKS, landing zone, multi-region, or any diagram built with Azure service icons.
More from hbmartin/graphviz2drawio
Sonarqube Analysis
hbmartin/graphviz2drawio
Inspect SonarQube Cloud/SonarCloud findings for this repository using local .env credentials.
Compare Render
hbmartin/graphviz2drawio
Visually verify graphviz2drawio conversion fidelity by rendering a graphviz source side-by-side as a native graphviz PNG and a converted draw.io PNG, then reading both images to compare.
Related
Works with
Categories
Questions about Compare Render
What does Compare Render do?
Visually verify graphviz2drawio conversion fidelity by rendering a Graphviz source as both native Graphviz PNG and converted draw.io PNG, then inspecting the images. Compare Render is an agent skill from hbmartin/graphviz2drawio.io PNG, then inspecting the images.
When should I use Compare Render?
Compare Render fits situations like: modifying graphviz2drawio conversion; answering whether converted output looks right.
How do I install Compare Render in Claude Code?
Run `npx skills add hbmartin/graphviz2drawio --skill compare-render -a claude-code`. Or copy the skill folder (.codex/skills/compare-render in hbmartin/graphviz2drawio) into .claude/skills/compare-render in your project. Claude Code loads it when a task matches its description.
How do I install Compare Render in Codex?
Run `npx skills add hbmartin/graphviz2drawio --skill compare-render -a codex`. Or copy the skill folder (.codex/skills/compare-render in hbmartin/graphviz2drawio) into .agents/skills/compare-render in your project. Codex loads it when a task matches its description.
Can I use Compare Render in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hbmartin/graphviz2drawio --skill compare-render -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/compare-render, .gemini/skills/compare-render, .github/skills/compare-render and .opencode/skills/compare-render in your project.
What does Compare Render need to run?
Going by SKILL.md and its folder, Compare Render needs the command-line tools its instructions call (uv).
Does Compare Render access the network?
SKILL.md contains no URLs. Its commands use uv, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Compare Render safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Compare Render use?
Compare Render is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Compare Render use?
About 1.2k tokens (SKILL.md is roughly 5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Compare Render?
Skills that share tags, products or a category with Compare Render: Diagram Design (cathrynlavery/diagram-design, 45k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars), Draw.io Diagram Reconstruction (HKUSTDial/Supervisor-Skills, 8.5k stars) and Scibox Diagram (jihe520/sci-box, 248 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Compare Render?
hbmartin (a GitHub user) maintains it in hbmartin/graphviz2drawio, which has 275 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on August 7, 2026.
Source: hbmartin/graphviz2drawio on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.