Wiki Ado Convert
microsoft/skills
Converts VitePress/GFM wiki markdown to Azure DevOps Wiki-compatible format.
Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.
Install Pretty Mermaid Renderer
$ npx skills add imxv/Pretty-mermaid-skills --skill pretty-mermaid -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install imxv/Pretty-mermaid-skills pretty-mermaid --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "pretty-mermaid" agent skill from https://github.com/imxv/Pretty-mermaid-skills/tree/main into .claude/skills/pretty-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pretty-mermaid", 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.
$ npx skills add imxv/Pretty-mermaid-skills --skill pretty-mermaid -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install imxv/Pretty-mermaid-skills pretty-mermaid --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "pretty-mermaid" agent skill from https://github.com/imxv/Pretty-mermaid-skills/tree/main into .agents/skills/pretty-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pretty-mermaid", 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 imxv/Pretty-mermaid-skills --skill pretty-mermaid -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install imxv/Pretty-mermaid-skills pretty-mermaid --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "pretty-mermaid" agent skill from https://github.com/imxv/Pretty-mermaid-skills/tree/main into .cursor/skills/pretty-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pretty-mermaid", 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.
$ npx skills add imxv/Pretty-mermaid-skills --skill pretty-mermaid -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install imxv/Pretty-mermaid-skills pretty-mermaid --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "pretty-mermaid" agent skill from https://github.com/imxv/Pretty-mermaid-skills/tree/main into .gemini/skills/pretty-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pretty-mermaid", 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 imxv/Pretty-mermaid-skills pretty-mermaidInstalls 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 imxv/Pretty-mermaid-skills --skill pretty-mermaid -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "pretty-mermaid" agent skill from https://github.com/imxv/Pretty-mermaid-skills/tree/main into .github/skills/pretty-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pretty-mermaid", 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 imxv/Pretty-mermaid-skills --skill pretty-mermaid -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install imxv/Pretty-mermaid-skills pretty-mermaid --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "pretty-mermaid" agent skill from https://github.com/imxv/Pretty-mermaid-skills/tree/main into .opencode/skills/pretty-mermaid/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pretty-mermaid", 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
pretty-mermaid- GitHub stars
- 1.5k
- Token cost
- ~2k tokens
- SKILL.md length
- 821 words
- Files
- 60 (incl. scripts, references, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser.
- Works in 7 steps: Determine whether the user supplied… → Choose the diagram type and output… → Read only the relevant reference file… → …
- Drawing an architecture or data-flow diagram for a README
- SKILL.md covers Working directory, Workflow, Choose a diagram type and Choose an output, plus 7 more sections
- Calls node and npm
What it does
The agent either takes Mermaid source you provide or writes one from prose, picks a diagram type from a table (flowchart, sequence, state, class, ER or XY chart) and an output format, saves new source as a .mmd file and renders it with a named theme or explicit colors. It then inspects the result for syntax errors, clipping or a crowded layout, renders again if needed, and returns the source and output paths with the chosen format and theme. It never overwrites an existing source or output file unless you ask.
Rendering runs through Node scripts in the skill folder: themes.mjs lists the 15 built-in themes, and render.mjs produces SVG, PNG with the format option, Unicode or plain ASCII text with an ASCII flag, or ANSI-colored text through a color-mode option. SVG suits READMEs and slides, PNG suits chats and raster-only tools, and text output suits terminals and logs. It runs locally without a browser or DOM, and the renderer is not copied into your project.
When your agent uses it
- Drawing an architecture or data-flow diagram for a README
- Rendering existing .mmd files to themed SVG or PNG
- Showing a diagram in a terminal or CI log as ASCII art
- Batch-converting several Mermaid files in one run
Example prompts
- “Draw a sequence diagram of the login flow and render it as an SVG.”
- “Render docs/architecture.mmd as a PNG using a dark theme.”
- “Show this flowchart as Unicode art so I can paste it into our CI log.”
Requirements
- Node.js, to run the bundled render scripts
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- Determine whether the user supplied Mermaid source or needs a diagram authored from prose.
- Choose the diagram type and output format from the tables below.
- Read only the relevant reference file when syntax, theme selection, or API behavior needs more detail.
- Save new source as a .mmd file, preserving user terminology and relationships.
- Render with a named theme or explicit colors.
- Inspect the result. Fix syntax, clipping, crowded layout, or unclear labels and render again.
- Return the source and output paths, plus the selected format and theme.
What it can do on your machine
Read from SKILL.md and the folder at commit e234ab7. 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
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
nodenpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, 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
Pretty Mermaid Renderer loads about 2k tokens when it runs, and up to ~6.9k if it reads all its reference files. Until then it costs about 127 tokens; SKILL.md has 821 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); the scripts in this folder are not scanned.
SKILL.md
The full file from imxv/Pretty-mermaid-skills at commit e234ab7, republished under its MIT licence (© imxv). 821 words, ~1,951 tokens.
Download SKILL.mdSave it as
.claude/skills/pretty-mermaid/SKILL.md (or your agent's skills folder). This skill also uses 59 other files; get the full folder from GitHub.- name
- pretty-mermaid
- description
- Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use this skill whenever the user provides Mermaid code or .mmd files; asks for a flowchart, sequence/state/class diagram, ERD, XY chart, or architecture/workflow/data-model visualization; or wants to beautify, theme, batch-convert, or make a diagram terminal-friendly. Runs locally without a browser or DOM, with 15 built-in themes and custom colors.
Pretty Mermaid
Create or render Mermaid diagrams with the bundled Node.js CLI. Use SVG for scalable documentation, PNG for sharing or raster-only consumers, and ASCII or Unicode for terminals and plain text.
Working directory
Treat the directory containing this file as <skill-root>. Run bundled scripts from that directory, or invoke them with absolute paths. Keep user source and rendered output in the user's requested location; do not copy the renderer into their project.
Workflow
- Determine whether the user supplied Mermaid source or needs a diagram authored from prose.
- Choose the diagram type and output format from the tables below.
- Read only the relevant reference file when syntax, theme selection, or API behavior needs more detail.
- Save new source as a
.mmdfile, preserving user terminology and relationships. - Render with a named theme or explicit colors.
- Inspect the result. Fix syntax, clipping, crowded layout, or unclear labels and render again.
- Return the source and output paths, plus the selected format and theme.
Do not overwrite an existing source or output file unless the user asked for replacement.
Choose a diagram type
| Need | Diagram type | Starter |
|---|---|---|
| Process, decision tree, architecture | Flowchart | flowchart LR |
| API calls, messages, interactions | Sequence | sequenceDiagram |
| Lifecycle or finite-state machine | State | stateDiagram-v2 |
| Classes, modules, relationships | Class | classDiagram |
| Database entities and cardinality | ER | erDiagram |
| Bars, lines, trends, comparisons | XY chart | xychart-beta |
Read references/DIAGRAM_TYPES.md when authoring non-trivial Mermaid syntax.
Choose an output
| Output | Best for | Notes |
|---|---|---|
| SVG | READMEs, docs, slides, websites | Scalable, themed, supports transparency |
| PNG | Chats, previews, raster-only tools | Set --format png; no external converter required |
| Unicode | Modern terminals and readable text previews | Default ASCII renderer output |
| Plain ASCII | Logs and restricted terminals | Add --use-ascii |
| ANSI-colored text | Interactive terminals | Set --color-mode |
Core commands
Run these from <skill-root>.
List themes
node scripts/themes.mjsRender SVG
node scripts/render.mjs \
--input diagram.mmd \
--output diagram.svg \
--theme tokyo-nightRender terminal text
node scripts/render.mjs \
--input diagram.mmd \
--output diagram.txt \
--format ascii \
--color-mode noneAdd --use-ascii when Unicode box-drawing characters are not acceptable.
Render PNG
node scripts/render.mjs \
--input diagram.mmd \
--output diagram.png \
--format png \
--width 1200 \
--theme tokyo-nightBatch render a directory
node scripts/batch.mjs \
--input-dir ./diagrams \
--output-dir ./rendered \
--format svg \
--theme github-dark \
--workers 4Use batch rendering for three or more diagrams or when consistent options must be applied to a directory.
Theme selection
- General dark documentation:
tokyo-night - GitHub dark or light surfaces:
github-dark,github-light - Print and presentations:
zinc-light - High-contrast color:
dracula - Cool, restrained palette:
nord,nord-light
Read references/THEMES.md or open docs/THEME_GALLERY.md when visual theme choice matters. A named theme can be refined with explicit color flags.
Useful options
Shared styling
| Option | Purpose |
|---|---|
--theme <name> | Apply one of the 15 built-in themes |
--bg, --fg | Set required base colors |
--line, --accent, --muted | Refine connectors, highlights, and secondary text |
--surface, --border | Refine node fill and stroke |
--font <name> | Set the SVG font family |
SVG
| Option | Purpose |
|---|---|
--transparent | Remove the SVG background |
--padding <n> | Set canvas padding |
--node-spacing <n> | Set horizontal node spacing |
--layer-spacing <n> | Set vertical layer spacing |
--component-spacing <n> | Separate disconnected components |
--interactive | Enable XY chart hover tooltips |
PNG
| Option | Purpose |
|---|---|
--width <n> | Set output width from 100 to 10000 pixels while preserving aspect ratio |
--transparent | Preserve a transparent background |
Show full SKILL.md (340 more words)Show less
Terminal output
| Option | Purpose |
|---|---|
--use-ascii | Replace Unicode box drawing with plain ASCII |
--padding-x, --padding-y | Tune diagram spacing |
--box-border-padding | Tune padding inside node boxes |
--color-mode <mode> | none, auto, ansi16, ansi256, truecolor, or html |
Run node scripts/render.mjs --help or node scripts/batch.mjs --help for the authoritative CLI list.
Authoring guidance
- Prefer short, concrete labels; preserve domain-specific terms from the user.
- Use explicit edge labels when a branch or message is ambiguous.
- Keep large diagrams readable by splitting unrelated concerns instead of shrinking text.
- Use
LRfor wide flows andTBfor narrow documents. - Avoid communicating meaning through color alone.
- Use a light theme for print and confirm contrast against the final background.
- For unfamiliar syntax, start from
assets/example_diagrams/and consult the diagram reference.
Validation
After rendering:
- Confirm the command exits successfully and the output file is non-empty.
- Confirm SVG output begins with
<svg; confirm PNG output opens as a valid image; confirm text output contains visible diagram content. - Inspect visual output when layout matters, especially long labels, CJK text, disconnected components, and XY charts.
- Confirm arrows, cardinalities, states, and labels match the source request.
- Report any renderer limitation instead of silently dropping unsupported syntax.
Run both npm test and npm run validate when changing this skill, its scripts, templates, or references.
Troubleshooting
- Missing dependency: run
npm installin<skill-root>; the CLI also attempts a first-run install. - Unknown theme: run
node scripts/themes.mjsand use an exact listed name. - Parse error: consult
references/DIAGRAM_TYPES.md, reduce to the failing statement, then restore the diagram incrementally. - Crowded SVG: increase
--node-spacing,--layer-spacing, or--component-spacing. - PNG color error: use concrete hex values for custom colors; unresolved external CSS variables cannot be rasterized.
- Terminal color escape codes in redirected output: use
--color-mode none.
Reference routing
| Resource | Read or use when |
|---|---|
references/DIAGRAM_TYPES.md | Authoring or debugging Mermaid syntax |
references/THEMES.md | Comparing themes or defining custom colors |
references/api_reference.md | Extending scripts or calling beautiful-mermaid directly |
docs/THEME_GALLERY.md | Choosing a theme visually |
assets/example_diagrams/ | Starting from a supported diagram template |
scripts/render.mjs | Rendering one diagram |
scripts/batch.mjs | Rendering a directory in parallel |
scripts/themes.mjs | Listing installed themes |
© imxv, MIT. 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 59 other files (scripts, references, assets) in the repository root of imxv/Pretty-mermaid-skills.
- SKILL.md
- .github/ISSUE_TEMPLATE/bug_report.yml
- .github/ISSUE_TEMPLATE/config.yml
- .github/ISSUE_TEMPLATE/feature_request.yml
- .github/PULL_REQUEST_TEMPLATE.md
- .github/release.yml
- .github/workflows/ci.yml
- .github/workflows/release.yml
- .gitignore
- CHANGELOG.md
- CODE_OF_CONDUCT.md
- CONTRIBUTING.md
- LICENSE
- README.md
- README_CN.md
- README_JA.md
- RELEASING.md
- SECURITY.md
- … and 42 more
Open the folder on GitHubat commit e234ab7
Compare with similar skills
Pretty Mermaid Renderer 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 |
|---|---|---|---|---|---|---|
| Pretty Mermaid Renderer this skillimxv/Pretty-mermaid-skills | 1.5k | — | ~2k | Automated safety check: Pass | MIT | |
| Wiki Ado Convertmicrosoft/skills | 3.1k | — | ~2.3k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 49k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| Draw.io Diagram StudioAgents365-ai/drawio-skill | 10k | — | ~2.4k | Automated safety check: Notes | MIT | |
| Mermaid Diagramsjjmartres/opencode | 133 | 6 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Eli5coldteadotai/pr-lens | 1.9k | — | ~2.3k | Automated safety check: Pass | MIT |
Similar skills
- Official
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.
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.
Mermaid Diagrams
jjmartres/opencode
Helps an agent pick the right Mermaid diagram type and write the syntax for class, sequence, flow, ER, C4, state and other software diagrams.
Eli5
coldteadotai/pr-lens
WHAT: Explains a codebase, a folder, a feature, a command or a pull request to someone who knows nothing about it, as a PR Lens canvas whose walkthrough builds the picture one part at a time.
C4 Architecture Diagrams
lexler/skill-factory
Creates C4 model diagrams at every zoom level, from system landscape to code, in ASCII, Mermaid or Structurizr, for designing or documenting software architecture.
Related
Categories
Questions about Pretty Mermaid Renderer
What does Pretty Mermaid Renderer do?
Writes and renders Mermaid diagrams as themed SVG, PNG or terminal ASCII and Unicode art with a bundled Node.js CLI that needs no browser. mmd file and renders it with a named theme or explicit colors. It then inspects the result for syntax errors, clipping or a crowded layout, renders again if needed, and returns the source and output paths with the chosen format and theme.
When should I use Pretty Mermaid Renderer?
Pretty Mermaid Renderer fits situations like: drawing an architecture or data-flow diagram for a README; rendering existing .mmd files to themed SVG or PNG; showing a diagram in a terminal or CI log as ASCII art; batch-converting several Mermaid files in one run.
How do I install Pretty Mermaid Renderer in Claude Code?
Run `npx skills add imxv/Pretty-mermaid-skills --skill pretty-mermaid -a claude-code`. Or copy the skill folder (the imxv/Pretty-mermaid-skills repository) into .claude/skills/pretty-mermaid in your project. Claude Code loads it when a task matches its description.
How do I install Pretty Mermaid Renderer in Codex?
Run `npx skills add imxv/Pretty-mermaid-skills --skill pretty-mermaid -a codex`. Or copy the skill folder (the imxv/Pretty-mermaid-skills repository) into .agents/skills/pretty-mermaid in your project. Codex loads it when a task matches its description.
Can I use Pretty Mermaid Renderer 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 imxv/Pretty-mermaid-skills --skill pretty-mermaid -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pretty-mermaid, .gemini/skills/pretty-mermaid, .github/skills/pretty-mermaid and .opencode/skills/pretty-mermaid in your project.
What does Pretty Mermaid Renderer need to run?
Going by SKILL.md and its folder, Pretty Mermaid Renderer needs the command-line tools its instructions call (node and npm). Our summary lists: Node.js, to run the bundled render scripts.
Does Pretty Mermaid Renderer access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Pretty Mermaid Renderer 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Pretty Mermaid Renderer use?
Pretty Mermaid Renderer is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Pretty Mermaid Renderer use?
About 2k tokens (SKILL.md is roughly 7.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5k tokens, read only when the agent opens those files.
What are the alternatives to Pretty Mermaid Renderer?
Skills that share tags, products or a category with Pretty Mermaid Renderer: Wiki Ado Convert (microsoft/skills, 3.1k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars), Draw.io Diagram Studio (Agents365-ai/drawio-skill, 10k stars) and Mermaid Diagrams (jjmartres/opencode, 133 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Pretty Mermaid Renderer?
imxv (a GitHub user) maintains it in imxv/Pretty-mermaid-skills, which has 1,524 GitHub stars. The repository was last updated on August 22, 2026.
Source: imxv/Pretty-mermaid-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.