AI-generated Mermaid Diagrams Too Ugly? This Open Source Project Fixes That
Can Mermaid generate diagrams but they just don't look good? Pretty-mermaid-skills polishes AI-generated diagrams into presentable results. It comes with 15 themes, supports 6 diagram types, renders locally, and works with tools like Claude Code and Cursor.
When you generate Mermaid diagrams with AI, the functionality works fine, but the color scheme and layout always feel like a half-done afterthought. Especially when you drop it into your README, it makes your whole project look unpolished.
There's a project on GitHub called Pretty-mermaid-skills, with around 1.4k stars, that specifically fixes the problem of "the diagram works, but it's ugly".
It's different from regular renderers: no browser required, it generates diagrams directly by running Node.js locally. It supports 15 themes (Tokyo Night, Dracula, GitHub Light are all included) and covers six diagram types: flowcharts, sequence diagrams, state diagrams, class diagrams, ER diagrams, and XY charts. It can output SVG, PNG, even ASCII for use in terminals.
Installation is just one command:
```bash
npx skills add imxv/pretty-mermaid-skills@pretty-mermaid -g -y
```
After installation, you can call it directly in AI programming environments like Claude Code, Cursor, Codex, and Gemini CLI. For example, to render a diagram with the Tokyo Night theme:
```bash
node scripts/render.mjs \
--input diagram.mmd \
--output output.svg \
--theme tokyo-night
```
Getting a PNG is just as easy, just add `--format png --width 1200`. It also supports batch rendering: add `--input-dir ./diagrams` to process an entire directory at once.
[](https://github.com/imxv/Pretty-mermaid-skills/blob/main/assets/social-preview.png)
One user commented: "You can spot Mermaid's default color scheme instantly. The diagram works but it's ugly, so a dedicated polishing tool is exactly what's needed." That description is spot on. "Works but looks bad" is a common problem with a lot of AI-generated content.
This project is an enhanced fork of another open source project, beautiful-mermaid. It supports CJK state names, multi-line labels, linkStyle, and even ANSI colored terminal output. If you write technical documentation, READMEs, or design documents, it's worth trying out. Otherwise, it's such a waste when the architecture diagram AI spent time generating drives readers away just because of bad colors.
[](https://github.com/imxv/Pretty-mermaid-skills/blob/main/assets/theme_gallery/tokyo-night.svg)
Project repo: https://github.com/imxv/Pretty-mermaid-skills
发布时间: 2026-09-24 21:57