Renders Mermaid .mmd diagram sources into PNG images using mermaid-cli.
npx skills add https://github.com/lfuuu/claude-rules --skill diagram-lfuuu
Please help me install this Agent Skill. Skill: diagram Source: https://github.com/lfuuu/claude-rules/tree/main/global-skills/diagram Command: npx skills add https://github.com/lfuuu/claude-rules --skill diagram-lfuuu
scripts/diagrams/render-single.sh and render-all.sh in the project, or copies ready-made templates into the project when they are missing. - Standardized styling and layout: Provides a default Mermaid themeVariables color palette, node style table, and flowchart layout rules that a project-level CLAUDE.md can override. - Visual verification workflow: After each render, the PNG is inspected for clipped text, overlapping labels, and poor layout, with iteration guidance. - Use Case: You add a new architecture diagram to your docs: create docs/diagrams/arch.mmd from the built-in template, render it to docs/pics/arch.png with one command, and embed it in Markdown with a link to the source file. ## Quick Start Ask the assistant to render the Mermaid diagram named 'architecture' into a PNG and embed it in the project documentation.High-intent search queries and answers about installing and using this skill.
Use mermaid-cli's mmdc command: mmdc -i input.mmd -o output.png -b white -s 2. The -b flag sets a white background and -s 2 renders at 2x scale for sharper images.
Install mermaid-cli globally with npm install -g @mermaid-js/mermaid-cli, then install system libraries like libnss3 and libgbm1, and run npx puppeteer browsers install chrome-headless-shell inside the mermaid-cli directory for headless rendering.
mmdc uses Puppeteer with headless Chrome, which requires system libraries such as libnss3, libatk, and libgbm. Missing libraries or a missing chrome-headless-shell installation cause launch failures; install both to fix it.
Use flowchart TB for vertical flow, declare the main data flow first, group storage nodes in a separate subgraph, and avoid internal links inside subgraphs. Adjust rankSpacing and nodeSpacing, and use <br/> instead of newline escapes for line breaks.
Yes, define themeVariables in the diagram's init directive, setting primaryColor, lineColor, background, and related values. Project-level configuration can override the default palette per diagram or per project.
camoaGenerate Mermaid diagrams for system architecture and data flow.
MaxWolf-01Validates Mermaid diagrams by parsing and rendering them with the official mermaid-cli.
rcarmoDesign, audit, and redraw inline SVG architecture and flow diagrams in documentation.
walterfanRender PlantUML, Mermaid, and Graphviz code blocks into PNG or SVG images.