Pretty Mermaid

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.

1,555 stars 77 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add imxv/Pretty-mermaid-skills --skill pretty-mermaid

Manual install

git clone --depth 1 https://github.com/imxv/Pretty-mermaid-skills.git /tmp/Pretty-mermaid-skills
mkdir -p ~/.claude/skills
cp -r /tmp/Pretty-mermaid-skills/. ~/.claude/skills/pretty-mermaid

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the 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.
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` |

Read the full skill on GitHub

Details

Skill name: pretty-mermaid
Repository: imxv/Pretty-mermaid-skills
License: MIT
Repo updated: 22 August 2026

FAQ

What does the Pretty Mermaid skill do?

How do I install the Pretty Mermaid skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add imxv/Pretty-mermaid-skills --skill pretty-mermaid. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Pretty Mermaid popular?

It lives in imxv/Pretty-mermaid-skills, which has 1,555 GitHub stars and 77 forks.

Related skills

Auteur

agiwhitelist/auteur

Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products (app, dashboard, admin, settings, onboarding, docs site) built as one design system with every component, state and route in one style. Use whenever the user wants to create or redesign a landing page, website, hero section, portfolio, promo or product page; wants scroll animations, storytelling pages, or a site that feels like a movie; or says "make it beautiful", "make it wow", "cinematic", or "desi

Frontend & DesignIn 2 lists18

Zhengxi Views

1.8k

lyra81604/zhengxi-views

郑希观点库——基于易方达基金经理郑希 2012–2026 年全部公开观点原文语料，外加从语料蒸馏、有本人原话佐证的郑希投资方法的可溯源 research skill。能做： (1) 溯源问答——他怎么看 AI算力/光通信/新能源/半导体/ROE 等，引用其原话作答； (2) 讲解他的投资方法/框架/选股逻辑；(3) 前瞻应用——用他的方法分析当下任意主题/行业/个股，语料没谈过也能据框架推演； (4) 风格化点评——用他季报/手记的口吻写市场点评、季度展望； (5) 言行对照——用他全部基金真实数据（季度持仓/净值/业绩/规模/任职回报）核对"说的"与"买的"，或答他的业绩/重仓/规模； (6) 全市场查询对比——内置约 2.7 万只基金列表，按需抓任意基金真实数据做查询或与郑希对比； (7) 郑希框架评分——给一只基金按他的方法打分（多像郑希会买的）。 When the user mentions 郑希/易方达郑希/zhengxi, asks his view on a sector/stock/theme, his 投资方法/框架/选股/风格/持仓/业绩/净值/规模, wants to apply his approach, a commentary 用郑希口吻, to check words vs holdings, or to look up/compare/score A

Frontend & Design192

Motionmaxxing

1.2k

Tejashmakwana/motionmaxxing

Direct and build professional motion-graphics films (launch videos, product promos, feature reveals, brand stings, kinetic-type pieces, social ads, CTAs) that read as made by a senior motion designer, not AI slop. Finds an idea only this brand could own (from its logo, control, material, verb, voice), builds a world for it (ground, light, depth, texture, 3D or generated image surfaces for the hero moment), then builds with a seek-safe GSAP runtime driven by curves measured frame by frame from 53 professional recreations, and reviews its own render honestly with scripted gates (look.py, lint.mj

Frontend & Design112

Logo Generator

2.3k

op7418/logo-generator-skill

Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.

Frontend & Design177

Web Clone

1.1k

Jane-xiaoer/claude-skill-web-clone

网站复刻 / 克隆方法论。USE WHEN 用户说复刻网站、克隆网站、clone website、抄个站、仿站、照着这个站做一个、reproduce site、还原某个网页效果、把这个站搬下来改成我的、复刻某个交互/WebGL/Canvas/Three.js 效果。提供「先拿真源码 → 判路径 → 逆向拆解 → 搭工程 → 替换内容」的可移植决策树，覆盖静态站 / React-Vue-Next 内容站 / WebGL-Canvas 重前端站三大分支，并强制核对任何 AI 二手分析里的可执行代码。

Frontend & Design133

Design Dna

2.1k

zanwei/design-dna

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "e

Frontend & Design114

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.