#634 by GitHub stars

imxv/Pretty-mermaid-skills

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

Documentation

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

e234ab73c299 → e234ab73c299

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → e234ab73c299

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit e234ab73c2992f03c36db04fd55ebb90abca9c45

1.6kGitHub stars

10stars in 7 days

1skill in this repository

0commits in 30 days

Heat

4.8

Star growth, last 7 daysAhead of 77% of tracked repositories
Star growth, last 24 hoursAhead of 83% of tracked repositories
Rank movement, last 7 daysAhead of 21% of tracked repositories
Commits, last 30 daysAhead of 0% of tracked repositories
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Individual skills in this repository

pretty-mermaid /

How it works

pretty-mermaid

When your agent uses it

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.

What it loads into context

Frontmatter

131 tokens

Always available to the agent

SKILL.md

1,811 tokens

When the skill is activated

Reference documents

13,177 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Working directory
Workflow
Choose a diagram type
Choose an output
Core commands
Theme selection
Useful options
Authoring guidance
Validation
Troubleshooting
Reference routing

Scripts executed separately

package.json
scripts/batch.mjs
scripts/generate-theme-gallery.mjs
scripts/png.mjs
scripts/render.mjs
scripts/smoke-test.mjs
scripts/themes.mjs
scripts/validate-docs.mjs

Files

.github/ISSUE_TEMPLATE/bug_report.ymlasset1,845 bytes
.github/ISSUE_TEMPLATE/config.ymlasset28 bytes
.github/ISSUE_TEMPLATE/feature_request.ymlasset1,044 bytes
.github/PULL_REQUEST_TEMPLATE.mddoc508 bytes
.github/release.ymlasset421 bytes
.github/workflows/ci.ymlasset1,360 bytes
.github/workflows/release.ymlasset1,239 bytes
.gitignoreasset570 bytes
CHANGELOG.mddoc1,389 bytes
CODE_OF_CONDUCT.mddoc3,925 bytes
CONTRIBUTING.mddoc1,776 bytes
LICENSEasset1,087 bytes
README.mddoc5,147 bytes
README_CN.mddoc5,106 bytes
README_JA.mddoc5,748 bytes
RELEASING.mddoc1,220 bytes
SECURITY.mddoc704 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
SKILL.mdcore7,802 bytes
assets/example_diagrams/class.mmdasset515 bytes
assets/example_diagrams/er.mmdasset584 bytes
assets/example_diagrams/flowchart.mmdasset253 bytes
assets/example_diagrams/sequence.mmdasset295 bytes
assets/example_diagrams/state.mmdasset225 bytes
assets/example_diagrams/xychart.mmdasset206 bytes
assets/social-preview.pngasset828,104 bytes
assets/theme_gallery/catppuccin-latte.svgasset5,922 bytes
assets/theme_gallery/catppuccin-mocha.svgasset5,922 bytes
assets/theme_gallery/dracula.svgasset5,922 bytes
assets/theme_gallery/github-dark.svgasset5,922 bytes
assets/theme_gallery/github-light.svgasset5,922 bytes
assets/theme_gallery/nord-light.svgasset5,922 bytes
assets/theme_gallery/nord.svgasset5,922 bytes
assets/theme_gallery/one-dark.svgasset5,922 bytes
assets/theme_gallery/solarized-dark.svgasset5,922 bytes
assets/theme_gallery/solarized-light.svgasset5,922 bytes
assets/theme_gallery/source.mmdasset176 bytes
assets/theme_gallery/tokyo-night-light.svgasset5,922 bytes
assets/theme_gallery/tokyo-night-storm.svgasset5,922 bytes
assets/theme_gallery/tokyo-night.svgasset5,922 bytes
assets/theme_gallery/zinc-dark.svgasset5,874 bytes
assets/theme_gallery/zinc-light.svgasset5,874 bytes
docs/THEME_GALLERY.mddoc2,193 bytes
package-lock.jsonasset8,675 bytes
package.jsonruns555 bytes
references/DIAGRAM_TYPES.mddoc8,025 bytes
references/THEMES.mddoc9,404 bytes
references/api_reference.mddoc2,457 bytes
scripts/batch.mjsruns10,284 bytes
scripts/generate-theme-gallery.mjsruns1,214 bytes
scripts/png.mjsruns10,681 bytes
scripts/render.mjsruns8,754 bytes
scripts/smoke-test.mjsruns11,006 bytes
scripts/themes.mjsruns1,644 bytes
scripts/validate-docs.mjsruns2,774 bytes

Read SKILL.md


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

View the complete source on GitHub

Skills included

pretty-mermaid

Repository facts

License: MIT
Created: Jan 30, 2026
Last pushed: Aug 22, 2026
Forks: 76
Open issues: 1
Project activity: Slowing

Rank over the last 12 weeks

Now #634 · best #499 · down 104 in 30 days

#623 on Oct 31
#624 on Nov 1
#627 on Nov 2
#629 on Nov 3
#633 on Nov 4
#634 since Nov 5

75 earlier periods

#631 on Aug 2
#667 on Aug 6
#623 on Aug 8
#630 on Aug 9
#660 on Aug 11
#628 on Aug 12
#590 on Aug 13
#542 on Aug 14
#520 on Aug 15
#528 on Aug 16
#530 on Aug 17
#544 on Aug 18
#533 on Aug 19
#532 on Aug 20
#536 on Aug 21
#519 on Aug 22
#538 on Aug 23
#541 on Aug 24
#550 on Aug 25
#539 on Aug 26
#551 on Aug 27
#555 on Aug 28
#524 on Aug 30
#550 on Aug 31
#556 on Sep 1
#548 on Sep 2
#552 on Sep 3
#534 on Sep 4
#527 on Sep 5
#543 on Sep 6
#548 on Sep 7
#565 on Sep 8
#551 on Sep 9
#556 on Sep 10
#547 on Sep 11
#545 on Sep 13
#567 on Sep 14
#555 on Sep 15
#564 from Sep 16 to Sep 17
#568 on Sep 18
#556 on Sep 19
#561 on Sep 20
#528 on Sep 21
#537 on Sep 22
#523 on Sep 23
#506 on Sep 24
#501 on Sep 25
#499 on Sep 26
#517 on Sep 27
#518 on Sep 28
#533 on Sep 29
#521 on Sep 30
#517 on Oct 1
#508 on Oct 3
#506 on Oct 4
#516 on Oct 5
#530 from Oct 6 to Oct 7
#548 on Oct 8
#545 on Oct 9
#533 on Oct 10
#544 on Oct 12
#545 on Oct 13
#550 on Oct 14
#547 on Oct 15
#550 on Oct 16
#544 on Oct 17
#568 on Oct 20
#575 on Oct 21
#562 on Oct 22
#556 on Oct 23
#548 on Oct 24
#608 on Oct 25
#615 on Oct 28
#618 on Oct 29
#620 on Oct 30

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 3, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 14 notes

SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
141 network referencesin 25 files: package-lock.json:23 scripts/smoke-test.mjs:48 README.md:11 and 22 more
No hidden or obfuscated text
No instruction overrides
8 executable scriptsin 8 files: package.json:1 scripts/batch.mjs:1 scripts/generate-theme-gallery.mjs:1 and 5 more
1 reference to secretsin 1 file: .gitignore:57
No requests to vote in Hot

Show all 150 signals by file

`.gitignore`

Access to secretsline 57
```
[Credential-related source omitted]
```

`CHANGELOG.md`

Network accessline 5

The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

Network accessline 29

[Unreleased]: https://github.com/imxv/Pretty-mermaid-skills/compare/v1.0.0...HEAD

Network accessline 30

[1.0.0]: https://github.com/imxv/Pretty-mermaid-skills/releases/tag/v1.0.0

`CODE_OF_CONDUCT.md`

Network accessline 39

Report abusive, harassing, or otherwise unacceptable behavior privately through the contact options on the [project owner's GitHub profile](https://github.com/imxv). Do not publish sensitive details in a public issue.

Network accessline 71

This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.1, available at [contributor-covenant.org/version/2/1/code_of_conduct.html](https://www.contributor-covenant.org/version/2/1/co

Network accessline 73

Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).

`CONTRIBUTING.md`

Network accessline 16

git clone https://github.com/imxv/Pretty-mermaid-skills.git

`README.md`

Network accessline 11

[![skills.sh](https://skills.sh/b/imxv/pretty-mermaid-skills)](https://www.skills.sh/imxv/pretty-mermaid-skills/pretty-mermaid)

Network accessline 12

[![CI](https://github.com/imxv/Pretty-mermaid-skills/actions/workflows/ci.yml/badge.svg)](https://github.com/imxv/Pretty-mermaid-skills/actions/workflows/ci.yml)

Network accessline 13

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

Network accessline 14

[![Node.js Version](https://img.shields.io/badge/node-%3E%3D16-brightgreen)](https://nodejs.org/)

Network accessline 15

[![GitHub stars](https://img.shields.io/github/stars/imxv/Pretty-mermaid-skills?style=social)](https://github.com/imxv/Pretty-mermaid-skills)

Network accessline 27

[View the skill, install count, and security audits on skills.sh →](https://www.skills.sh/imxv/pretty-mermaid-skills/pretty-mermaid)

Network accessline 154

[![Star History Chart](https://api.star-history.com/svg?repos=imxv/Pretty-mermaid-skills&type=timeline&legend=top-left)](https://www.star-history.com/?repos=imxv%2FPretty-mermaid-skills&type=timeline&legend=bottom-right)

Network accessline 156

## 🙏 Acknowledgments Based on [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid)

Network accessline 157

Based on [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid)

`README_CN.md`

Network accessline 11

[![skills.sh](https://skills.sh/b/imxv/pretty-mermaid-skills)](https://www.skills.sh/imxv/pretty-mermaid-skills/pretty-mermaid)

Network accessline 12

[![CI](https://github.com/imxv/Pretty-mermaid-skills/actions/workflows/ci.yml/badge.svg)](https://github.com/imxv/Pretty-mermaid-skills/actions/workflows/ci.yml)

Network accessline 13

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

Network accessline 14

[![Node.js Version](https://img.shields.io/badge/node-%3E%3D16-brightgreen)](https://nodejs.org/)

Network accessline 15

[![GitHub stars](https://img.shields.io/github/stars/imxv/Pretty-mermaid-skills?style=social)](https://github.com/imxv/Pretty-mermaid-skills)

Network accessline 27

[前往 skills.sh 查看安装量与安全扫描结果 →](https://www.skills.sh/imxv/pretty-mermaid-skills/pretty-mermaid)

Network accessline 154

[![Star History Chart](https://api.star-history.com/svg?repos=imxv/Pretty-mermaid-skills&type=timeline&legend=top-left)](https://www.star-history.com/#imxv/Pretty-mermaid-skills&type=timeline&legend=top-left)

Network accessline 156

## 🙏 致谢 基于 [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) 项目

Network accessline 157

基于 [beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) 项目

`README_JA.md`

Network accessline 11

[![skills.sh](https://skills.sh/b/imxv/pretty-mermaid-skills)](https://www.skills.sh/imxv/pretty-mermaid-skills/pretty-mermaid)

Network accessline 12

[![CI](https://github.com/imxv/Pretty-mermaid-skills/actions/workflows/ci.yml/badge.svg)](https://github.com/imxv/Pretty-mermaid-skills/actions/workflows/ci.yml)

Network accessline 13

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

Network accessline 14

[![Node.js Version](https://img.shields.io/badge/node-%3E%3D16-brightgreen)](https://nodejs.org/)

Network accessline 15

[![GitHub stars](https://img.shields.io/github/stars/imxv/Pretty-mermaid-skills?style=social)](https://github.com/imxv/Pretty-mermaid-skills)

Network accessline 27

[skills.sh でインストール数とセキュリティ監査を確認 →](https://www.skills.sh/imxv/pretty-mermaid-skills/pretty-mermaid)

Network accessline 156

[![Star History Chart](https://api.star-history.com/svg?repos=imxv/Pretty-mermaid-skills&type=timeline&legend=top-left)](https://www.star-history.com/?repos=imxv%2FPretty-mermaid-skills&type=timeline&legend=bottom-right)

Network accessline 160

[beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) を利用しています。

`SECURITY.md`

Network accessline 16

Use GitHub's [private vulnerability reporting form](https://github.com/imxv/Pretty-mermaid-skills/security/advisories/new). Do not use a public issue for security reports.

`assets/theme_gallery/catppuccin-latte.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#eff1f5;--fg:#4c4f69;--line:#9ca0b0;--accent:#8839ef;--muted:#9ca0b0;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/catppuccin-mocha.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#1e1e2e;--fg:#cdd6f4;--line:#585b70;--accent:#cba6f7;--muted:#6c7086;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/dracula.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#282a36;--fg:#f8f8f2;--line:#6272a4;--accent:#bd93f9;--muted:#6272a4;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/github-dark.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#0d1117;--fg:#e6edf3;--line:#3d444d;--accent:#4493f8;--muted:#9198a1;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/github-light.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#ffffff;--fg:#1f2328;--line:#d1d9e0;--accent:#0969da;--muted:#59636e;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/nord-light.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#eceff4;--fg:#2e3440;--line:#aab1c0;--accent:#5e81ac;--muted:#7b88a1;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/nord.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#2e3440;--fg:#d8dee9;--line:#4c566a;--accent:#88c0d0;--muted:#616e88;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/one-dark.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#282c34;--fg:#abb2bf;--line:#4b5263;--accent:#c678dd;--muted:#5c6370;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/solarized-dark.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#002b36;--fg:#839496;--line:#586e75;--accent:#268bd2;--muted:#586e75;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/solarized-light.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#fdf6e3;--fg:#657b83;--line:#93a1a1;--accent:#268bd2;--muted:#93a1a1;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/tokyo-night-light.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#d5d6db;--fg:#343b58;--line:#34548a;--accent:#34548a;--muted:#9699a3;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/tokyo-night-storm.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#24283b;--fg:#a9b1d6;--line:#3d59a1;--accent:#7aa2f7;--muted:#565f89;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/tokyo-night.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#1a1b26;--fg:#a9b1d6;--line:#3d59a1;--accent:#7aa2f7;--muted:#565f89;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/zinc-dark.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#18181B;--fg:#FAFAFA;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`assets/theme_gallery/zinc-light.svg`

Network accessline 1

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 742.8330000000001 207.165" width="742.8330000000001" height="207.165" style="--bg:#FFFFFF;--fg:#27272A;background:var(--bg)">

Network accessline 2

<style>   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');   text { font-family: 'Inter', system-ui, sans-serif; }

Network accessline 3

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap');

`package-lock.json`

Network accessline 23

"node_modules/@resvg/resvg-js": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js/-/resvg-js-2.6.2.tgz",

Network accessline 24

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js/-/resvg-js-2.6.2.tgz",       "integrity": "sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==",

Network accessline 25

"resolved": "https://registry.npmjs.org/@resvg/resvg-js/-/resvg-js-2.6.2.tgz",

Network accessline 46

"node_modules/@resvg/resvg-js-android-arm-eabi": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.6.2.tgz",

Network accessline 47

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.6.2.tgz",       "integrity": "sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJq

Network accessline 48

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.6.2.tgz",

Network accessline 62

"node_modules/@resvg/resvg-js-android-arm64": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm64/-/resvg-js-android-arm64-2.6.2.tgz",

Network accessline 63

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm64/-/resvg-js-android-arm64-2.6.2.tgz",       "integrity": "sha512-VcOKezEhm2VqzXpcIJoITuvUS/fcjIw5NA/w3tjzWyzmvoCdd+QXIqy3FBGulWdClvp4g+IfUemigrkL

Network accessline 64

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-android-arm64/-/resvg-js-android-arm64-2.6.2.tgz",

Network accessline 78

"node_modules/@resvg/resvg-js-darwin-arm64": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-arm64/-/resvg-js-darwin-arm64-2.6.2.tgz",

Network accessline 79

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-arm64/-/resvg-js-darwin-arm64-2.6.2.tgz",       "integrity": "sha512-nmok2LnAd6nLUKI16aEB9ydMC6Lidiiq2m1nEBDR1LaaP7FGs4AJ90qDraxX+CWlVuRlvNjyYJTNv8qFjt

Network accessline 80

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-arm64/-/resvg-js-darwin-arm64-2.6.2.tgz",

Network accessline 94

"node_modules/@resvg/resvg-js-darwin-x64": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-x64/-/resvg-js-darwin-x64-2.6.2.tgz",

Network accessline 95

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-x64/-/resvg-js-darwin-x64-2.6.2.tgz",       "integrity": "sha512-GInyZLjgWDfsVT6+SHxQVRwNzV0AuA1uqGsOAW+0th56J7Nh6bHHKXHBWzUrihxMetcFDmQMAX1tZ1fZDYSRsw

Network accessline 96

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-darwin-x64/-/resvg-js-darwin-x64-2.6.2.tgz",

Network accessline 110

"node_modules/@resvg/resvg-js-linux-arm-gnueabihf": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm-gnueabihf/-/resvg-js-linux-arm-gnueabihf-2.6.2.tgz",

Network accessline 111

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm-gnueabihf/-/resvg-js-linux-arm-gnueabihf-2.6.2.tgz",       "integrity": "sha512-YIV3u/R9zJbpqTTNwTZM5/ocWetDKGsro0SWp70eGEM9eV2MerWyBRZnQIgzU3YBnSBQ

Network accessline 112

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm-gnueabihf/-/resvg-js-linux-arm-gnueabihf-2.6.2.tgz",

Network accessline 126

"node_modules/@resvg/resvg-js-linux-arm64-gnu": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-gnu/-/resvg-js-linux-arm64-gnu-2.6.2.tgz",

Network accessline 127

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-gnu/-/resvg-js-linux-arm64-gnu-2.6.2.tgz",       "integrity": "sha512-zc2BlJSim7YR4FZDQ8OUoJg5holYzdiYMeobb9pJuGDidGL9KZUv7SbiD4E8oZogtYY42UZEap7d

Network accessline 128

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-gnu/-/resvg-js-linux-arm64-gnu-2.6.2.tgz",

Network accessline 142

"node_modules/@resvg/resvg-js-linux-arm64-musl": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-musl/-/resvg-js-linux-arm64-musl-2.6.2.tgz",

Network accessline 143

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-musl/-/resvg-js-linux-arm64-musl-2.6.2.tgz",       "integrity": "sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TW

Network accessline 144

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-arm64-musl/-/resvg-js-linux-arm64-musl-2.6.2.tgz",

Network accessline 158

"node_modules/@resvg/resvg-js-linux-x64-gnu": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-gnu/-/resvg-js-linux-x64-gnu-2.6.2.tgz",

Network accessline 159

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-gnu/-/resvg-js-linux-x64-gnu-2.6.2.tgz",       "integrity": "sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjub

Network accessline 160

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-gnu/-/resvg-js-linux-x64-gnu-2.6.2.tgz",

Network accessline 174

"node_modules/@resvg/resvg-js-linux-x64-musl": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-musl/-/resvg-js-linux-x64-musl-2.6.2.tgz",

Network accessline 175

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-musl/-/resvg-js-linux-x64-musl-2.6.2.tgz",       "integrity": "sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRB

Network accessline 176

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-linux-x64-musl/-/resvg-js-linux-x64-musl-2.6.2.tgz",

Network accessline 190

"node_modules/@resvg/resvg-js-win32-arm64-msvc": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-arm64-msvc/-/resvg-js-win32-arm64-msvc-2.6.2.tgz",

Network accessline 191

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-arm64-msvc/-/resvg-js-win32-arm64-msvc-2.6.2.tgz",       "integrity": "sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q

Network accessline 192

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-arm64-msvc/-/resvg-js-win32-arm64-msvc-2.6.2.tgz",

Network accessline 206

"node_modules/@resvg/resvg-js-win32-ia32-msvc": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-ia32-msvc/-/resvg-js-win32-ia32-msvc-2.6.2.tgz",

Network accessline 207

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-ia32-msvc/-/resvg-js-win32-ia32-msvc-2.6.2.tgz",       "integrity": "sha512-har4aPAlvjnLcil40AC77YDIk6loMawuJwFINEM7n0pZviwMkMvjb2W5ZirsNOZY4aDbo5tLx0wN

Network accessline 208

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-ia32-msvc/-/resvg-js-win32-ia32-msvc-2.6.2.tgz",

Network accessline 222

"node_modules/@resvg/resvg-js-win32-x64-msvc": {       "version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-x64-msvc/-/resvg-js-win32-x64-msvc-2.6.2.tgz",

Network accessline 223

"version": "2.6.2",       "resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-x64-msvc/-/resvg-js-win32-x64-msvc-2.6.2.tgz",       "integrity": "sha512-ZXtYhtUr5SSaBrUDq7DiyjOFJqBVL/dOBN7N/qmi/pO0IgiWW/f/ue3nbvu9joWE5aAKDoIzy/CxsY

Network accessline 224

"resolved": "https://registry.npmjs.org/@resvg/resvg-js-win32-x64-msvc/-/resvg-js-win32-x64-msvc-2.6.2.tgz",

Network accessline 238

"node_modules/beautiful-mermaid": {       "version": "1.1.3",       "resolved": "https://registry.npmjs.org/beautiful-mermaid/-/beautiful-mermaid-1.1.3.tgz",

Network accessline 239

"version": "1.1.3",       "resolved": "https://registry.npmjs.org/beautiful-mermaid/-/beautiful-mermaid-1.1.3.tgz",       "integrity": "sha512-TItrtrAyHp1vwFfFVYauWGrquouk/6SS21Aq3RsxindSYZODcN4xYrPZD6BiZRU+o5mKJzDPz9MUSMvELdylyg==",

Network accessline 240

"resolved": "https://registry.npmjs.org/beautiful-mermaid/-/beautiful-mermaid-1.1.3.tgz",

Network accessline 248

"node_modules/elkjs": {       "version": "0.11.1",       "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.11.1.tgz",

Network accessline 249

"version": "0.11.1",       "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.11.1.tgz",       "integrity": "sha512-zxxR9k+rx5ktMwT/FwyLdPCrq7xN6e4VGGHH8hA01vVYKjTFik7nHOxBnAYtrgYUB1RpAiLvA1/U2YraWxyKKg==",

Network accessline 250

"resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.11.1.tgz",

Network accessline 254

"node_modules/entities": {       "version": "7.0.1",       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",

Network accessline 255

"version": "7.0.1",       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",       "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",

Network accessline 256

"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",

Network accessline 261

},       "funding": {         "url": "https://github.com/fb55/entities?sponsor=1"

Network accessline 262

"funding": {         "url": "https://github.com/fb55/entities?sponsor=1"       }

Network accessline 263

"url": "https://github.com/fb55/entities?sponsor=1"

`package.json`

Executable scriptline 1
```
Executable file
```

`references/api_reference.md`

Network accessline 54

For exact upstream behavior, consult the [beautiful-mermaid README](https://github.com/lukilabs/beautiful-mermaid#readme) and [v1.x releases](https://github.com/lukilabs/beautiful-mermaid/releases).

`scripts/batch.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/generate-theme-gallery.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/png.mjs`

Executable scriptline 1
```
Executable file
```

`scripts/render.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/smoke-test.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

Network accessline 48

const literalBackgroundSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" style="background:#fff"></svg>';

Network accessline 52

const stylesheetOverrideSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" style="background:var(--bg)"><style>svg { --bg:#fff; } svg { --bg:#000; }</style></svg>';

Network accessline 56

const inlineOverrideSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" style="--bg:#123;background:var(--bg)"><style>svg { --bg:#fff; }</style></svg>';

Network accessline 60

const rootSpecificitySvg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" style="background:var(--bg)"><style>:root { --bg:#fff; } svg { --bg:#000; }</style></svg>';

Network accessline 63

const scopedVariablesSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><style>.theme { --accent:#f00; } .node { fill:var(--accent); }</style><rect class="theme node"/></svg>';

Network accessline 69

const mixedCaseSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" style="--bg:#fff;background:VAR(--bg)"><style>rect { fill:COLOR-MIX(in srgb, #fff 50%, #000); }</style><rect width="5" height="5" fill="myvar(--bg)" filter

Network accessline 76

const partialMixSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" style="background:color-mix(in srgb, #f00 20%, #00f 20%)"></svg>';

Network accessline 79

assertRenderedPixel(partialMixSvg, [51, 0, 51, 102]); assert.throws(   () => prepareSvgForPng('<svg xmlns="http://www.w3.org/2000/svg" style="background:color-mix(in srgb, #f00 120%, #00f)"></svg>'),

Network accessline 80

assert.throws(   () => prepareSvgForPng('<svg xmlns="http://www.w3.org/2000/svg" style="background:color-mix(in srgb, #f00 120%, #00f)"></svg>'),   /Invalid CSS color weight/,

Network accessline 81

() => prepareSvgForPng('<svg xmlns="http://www.w3.org/2000/svg" style="background:color-mix(in srgb, #f00 120%, #00f)"></svg>'),

`scripts/themes.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

`scripts/validate-docs.mjs`

Executable scriptline 1
```
#!/usr/bin/env node
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

No combined signals at this commit.

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

[![imxv/Pretty-mermaid-skills on hotskills](https://hotskills.dev/badge/imxv-pretty-mermaid-skills.svg)](https://hotskills.dev/skill/imxv-pretty-mermaid-skills/)

imxv/Pretty-mermaid-skills

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

pretty-mermaid

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Rank over the last 12 weeks

Before you install

.gitignore

CHANGELOG.md

CODE_OF_CONDUCT.md

CONTRIBUTING.md

README.md

README_CN.md

README_JA.md

SECURITY.md

assets/theme_gallery/catppuccin-latte.svg

assets/theme_gallery/catppuccin-mocha.svg

assets/theme_gallery/dracula.svg

assets/theme_gallery/github-dark.svg

assets/theme_gallery/github-light.svg

assets/theme_gallery/nord-light.svg

assets/theme_gallery/nord.svg

assets/theme_gallery/one-dark.svg

assets/theme_gallery/solarized-dark.svg

assets/theme_gallery/solarized-light.svg

assets/theme_gallery/tokyo-night-light.svg

assets/theme_gallery/tokyo-night-storm.svg

assets/theme_gallery/tokyo-night.svg

assets/theme_gallery/zinc-dark.svg

assets/theme_gallery/zinc-light.svg

package-lock.json

package.json

references/api_reference.md

scripts/batch.mjs

scripts/generate-theme-gallery.mjs

scripts/png.mjs

scripts/render.mjs

scripts/smoke-test.mjs

scripts/themes.mjs

scripts/validate-docs.mjs

How the signals fit together

Works with

You might also use

Tradelord223/plain-english

tw93/Waza

CloudAI-X/claude-workflow-v2

gviiisen/repo-context-ledger

ejklock/living-docs-skill

addyosmani/agent-skills

Explore alternatives and comparisons

Add this badge to your README

`SKILL.md`

`.gitignore`

`CHANGELOG.md`

`CODE_OF_CONDUCT.md`

`CONTRIBUTING.md`

`README.md`

`README_CN.md`

`README_JA.md`

`SECURITY.md`

`assets/theme_gallery/catppuccin-latte.svg`

`assets/theme_gallery/catppuccin-mocha.svg`

`assets/theme_gallery/dracula.svg`

`assets/theme_gallery/github-dark.svg`

`assets/theme_gallery/github-light.svg`

`assets/theme_gallery/nord-light.svg`

`assets/theme_gallery/nord.svg`

`assets/theme_gallery/one-dark.svg`

`assets/theme_gallery/solarized-dark.svg`

`assets/theme_gallery/solarized-light.svg`

`assets/theme_gallery/tokyo-night-light.svg`

`assets/theme_gallery/tokyo-night-storm.svg`

`assets/theme_gallery/tokyo-night.svg`

`assets/theme_gallery/zinc-dark.svg`

`assets/theme_gallery/zinc-light.svg`

`package-lock.json`

`package.json`

`references/api_reference.md`

`scripts/batch.mjs`

`scripts/generate-theme-gallery.mjs`

`scripts/png.mjs`

`scripts/render.mjs`

`scripts/smoke-test.mjs`

`scripts/themes.mjs`

`scripts/validate-docs.mjs`