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 in visual_harmony_guide.md.

2. Multi-Format Output

2. PlantUML to Image (Planned):
   • Future support for .puml files.

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.svg

Dependencies

• @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.