diagram

Solid

Render a Mermaid diagram to a self-contained HTML file and a PNG, using the browse shim as the renderer — no heavy diagram toolchain to install.

AI & Automation 5 stars 0 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%
26
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

## When to invoke Use to turn a description or some Mermaid source into a picture — "draw a diagram", "make a flowchart", "diagram this architecture", "visualize this as a graph". # /diagram — Render a Mermaid diagram vibestack renders **Mermaid** by wrapping it in a self-contained HTML page (Mermaid from a CDN) and screenshotting it with the browse shim. No extra toolchain: the HTML opens in any browser even with no shim, and the PNG is produced by the same `$B` you already use for QA. {{include lib/snippets/browse-setup.md}} ### 1. Get the Mermaid source If the user gave Mermaid, use it. Otherwise write it from their description (`flowchart`, `sequenceDiagram`, `erDiagram`, `classDiagram`, `gantt`, etc.). Pick an output base path (default `./diagram`). ### 2. Write the self-contained HTML ```bash OUT="${OUT:-./diagram}" # base path; produces $OUT.html and $OUT.png mkdir -p "$(dirname "$OUT")" cat > "$OUT.html" <<'HTML' <!DOCTYPE html><html><head><meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script> <style>body{margin:0;padding:20px;background:#fff;font-family:system-ui}</style> </head><body> <pre class="mermaid"> __MERMAID__ </pre> <script>mermaid.initialize({startOnLoad:true,theme:'default'});</script> </body></html> HTML ``` Replace the `__MERMAID__` placeholder with the actual source (write the file with the Write tool if the diagram has characters awkward for a heredoc). ### 3. Render to PNG with ...

Details

Author
timurgaleev
Repository
timurgaleev/vibestack
Created
3 months ago
Last Updated
1 weeks ago
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

mermaid-diagram

Create Mermaid diagrams, generate PNGs via mmdc, and reference them from Markdown documents. Use when creating, updating, or managing diagrams in a project.

9 Updated today
koborin-ai
AI & Automation Listed

mermaid-to-images

Turn a Markdown file's diagrams into image files and rewrite each block as a Markdown image reference. Handles two sources: ```mermaid fenced blocks (rendered directly) and hand-drawn ASCII diagrams in plain fences (sequence/flow/box art), which are first translated to equivalent mermaid and then rendered. Uses mermaid-cli (mmdc) offline when available, or the hosted mermaid.ink service otherwise. Use when a Markdown doc must show diagrams in a viewer that does not render mermaid (many editors, PDF/print, some blog engines), or to promote ASCII art to real diagrams. Takes one argument: the path to the Markdown file. Edits the file in place, so it is user-invoked only.

0 Updated 1 weeks ago
hcussi
AI & Automation Listed

diagram

Draw and iterate on diagrams with the user — system architecture, code structure, data models, flows, or idea sketches — as version-controlled Mermaid/DOT/Excalidraw source with live previews

0 Updated yesterday
VytCepas