Diagram Renderer (Protocol v1)
Overview
This skill is the official implementation of the Gemini Diagram ADF Protocol v1. It decouples AI logic from visualization syntax, allowing Gemini to generate professional-grade diagrams (Flowcharts, Gantt, Sequence, ER, etc.) by providing pure data.
Capabilities
- Intent-Driven Rendering
Automatically selects the best visualization strategy based on user intent:
-
system_architecture : Symmetric, icon-rich maps.
-
project_roadmap : 16:9 top-axis Gantt charts.
-
api_sequence : Modern tech-dark sequence diagrams.
-
db_schema : Professional ER diagrams.
-
strategy_map : Business-friendly forest themed maps.
- Designer Finish (Automatic)
Every output is physically standardized to 16:9 (1920x1080) and features:
-
Depth: Auto-injected drop shadows and gradients.
-
Typography: Refined fonts (Segoe UI / Fira Code) and spacing.
-
Branding: Unified theme support (base , dark , forest ).
Usage (ADF Protocol)
AI agents should provide a JSON file conforming to schemas/diagram-adf.schema.json .
{ "protocol": "gemini-diagram-v1", "intent": "project_roadmap", "title": "Q1 Development", "elements": { "nodes": [ { "id": "n1", "name": "Phase 1", "section": "Planning", "start": "2026-03-01", "duration": "7d" } ] } }
node dist/index.js --input input.json --out output.svg
Extension Points
-
themeVariables : Override specific colors or fonts.
-
customStyle : Inject custom CSS properties.
-
elements.diagram : Passthrough for raw Mermaid code when specialized tweaks are needed.
Knowledge Registry
-
theme-registry.json : Global theme and resolution defaults.
-
design-rules.json : Mapping of intents to rendering strategies.
-
design-styles.json : Advanced CSS override injection rules.