pretty-mermaid

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellDeclared2 observations
• DependenciesNot pinnedSome versions float
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

@resvg/resvg-js, beautiful-mermaid

Audit 0.4.1 · source sha 13cf4c3aadcb · 20 Oct 2026Report an issue or request a re-scan

• Publisherimxv GitHub userOwner of the repository this skill is read from
• Source folderimxv/pretty-mermaid-skillsThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdict13cf4c3aadcbA new audit runs when the source changes
• Repository statusNot archivedLast push 58 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its 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…

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

1. Determine whether the user supplied Mermaid source or needs a diagram authored from prose.
2. Choose the diagram type and output format from the tables below.
3. Read only the relevant reference file when syntax, theme selection, or API behavior needs more detail.
4. Save new source as a `.mmd` file, preserving user terminology and relationships.
5. Render with a named theme or explicit colors.
6. Inspect the result. Fix syntax, clipping, crowded layout, or unclear labels and render again.
7. 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

```bash
node scripts/themes.mjs
```

### Render SVG

```bash
node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.svg \
  --theme tokyo-night
```

### Render terminal text

```bash
node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.txt \
  --format ascii \
  --color-mode none
```

Add `--use-ascii` when Unicode box-drawing characters are not acceptable.

### Render PNG

```bash
node scripts/render.mjs \
  --input diagram.mmd \
  --output diagram.png \
  --format png \
  --width 1200 \
  --theme tokyo-night
```

### Batch render a directory

```bash
node scripts/batch.mjs \
  --input-dir ./diagrams \
  --output-dir ./rendered \
  --format svg \
  --theme github-dark \
  --workers 4
```

Use 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 |

### 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 `LR` for wide flows and `TB` for 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:

1. Confirm the 

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-20
   ✓SAFE B 89 / 100

   first audit · source 13cf4c3aadcb

Questions about pretty-mermaid

• github.com/imxv/pretty-mermaid-skills — the audited source at commit 13cf4c3aadcb and every finding aboveObserved · 20 Oct 2026

Spotted something wrong? Report a correction · Methodology