← ClaudeAtlas

pretty-mermaidlisted

Render beautiful Mermaid diagrams as SVG or ASCII art using the beautiful-mermaid library. Supports 15+ themes, 5 diagram types (flowchart, sequence, state, class, ER), and ultra-fast rendering. Use this skill when: 1. User asks to "render a mermaid diagram" or provides .mmd files 2. User requests "create a flowchart/sequence diagram/state diagram" 3. User wants to "apply a theme" or "beautify a diagram" 4. User needs to "batch process multiple diagrams" 5. User mentions "ASCII diagram" or "terminal-friendly diagram" 6. User wants to visualize architecture, workflows, or data models
drafael/coding-harness · ★ 1 · AI & Automation · score 74
Install: claude install-skill drafael/coding-harness
# Pretty Mermaid Render stunning, professionally-styled Mermaid diagrams with one command. Supports SVG for web/docs and ASCII for terminals. ## Quick Start ### Render a Single Diagram **From a file:** ```bash node scripts/render.mjs \ --input diagram.mmd \ --output diagram.svg \ --format svg \ --theme tokyo-night ``` **From user-provided Mermaid code:** 1. Save the code to a `.mmd` file 2. Run the render script with desired theme ### Batch Render Multiple Diagrams ```bash node scripts/batch.mjs \ --input-dir ./diagrams \ --output-dir ./output \ --format svg \ --theme dracula \ --workers 4 ``` ### ASCII Output (Terminal-Friendly) ```bash node scripts/render.mjs \ --input diagram.mmd \ --format ascii \ --use-ascii ``` --- ## Workflow Decision Tree **Step 1: What does the user want?** - **Render existing Mermaid code** → Go to [Rendering](#rendering-diagrams) - **Create new diagram** → Go to [Creating](#creating-diagrams) - **Apply/change theme** → Go to [Theming](#theming) - **Batch process** → Go to [Batch Rendering](#batch-rendering) **Step 2: Choose output format** - **SVG** (web, docs, presentations) → `--format svg` - **ASCII** (terminal, logs, plain text) → `--format ascii` **Step 3: Select theme** - **Dark mode docs** → `tokyo-night` (recommended) - **Light mode docs** → `github-light` - **Vibrant colors** → `dracula` - **See all themes** → Run `node scripts/themes.mjs` --- ## Rendering Diagrams ### From File When user provides