diagram-renderer
Converts diagram code (Mermaid, PlantUML) into image files (PNG/SVG). Useful for visualizing text-based architecture diagrams, flowcharts, and sequence diagrams.
Resources
2Install
npx skillscat add famaoai-creator/gemini-skills/diagram-renderer Install via the SkillsCat registry.
About this skill
This skill converts text-based diagram code (e.g., Mermaid, PlantUML) into image files (PNG/SVG) for visualizing architectures, flowcharts, and sequences. It solves the problem of rendering textual diagrams into shareable visuals without manual design. Use it when generating images from code for documentation, presentations, or collaborative design workflows.
SKILL.md
Diagram Renderer
Overview
This skill acts as a rendering engine for text-based diagrams. It takes code (like Mermaid or PlantUML) as input and outputs high-quality image files.
Capabilities
1. Brand-Themed Rendering
- Palette Awareness: Automatically looks up
knowledge/templates/themes/palettes/for brand-specific colors. - Dynamic Styling: Injects Mermaid
%%{init: ...}%%directives to match the chart's colors with the overall project theme defined invisual_harmony_guide.md.
2. Multi-Format Output
- PlantUML to Image (Planned):
- Future support for
.pumlfiles.
- Future support for
Usage
# Render a Mermaid file to PNG
node scripts/render.cjs input.mmd output.png
# Render specific format (svg, pdf)
node scripts/render.cjs input.mmd output.svgDependencies
@mermaid-js/mermaid-cli(Requires Puppeteer/Chromium)
Knowledge Protocol
- This skill adheres to the
knowledge/orchestration/knowledge-protocol.md. It automatically integrates Public, Confidential (Company/Client), and Personal knowledge tiers, prioritizing the most specific secrets while ensuring no leaks to public outputs.
Categories
Install
npx skillscat add famaoai-creator/gemini-skills/diagram-renderer Install via the SkillsCat registry.