diagram-renderer

Original：🇺🇸 English

Translated

1 scripts

Converts diagram code (Mermaid, PlantUML) into image files (PNG/SVG). Useful for visualizing text-based architecture diagrams, flowcharts, and sequence diagrams.

2installs

Sourcefamaoai-creator/gemini-skills

Added on2026-02-25

NPX Install

npx skill4agent add famaoai-creator/gemini-skills diagram-renderer

SKILL.md Content

View Translation Comparison →

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

PlantUML to Image (Planned):
- Future support for
```
.puml
```
  files.

Usage

bash

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