LabinatorSolutions/kroki-editorial-diagrams
3 stars · Last commit 2026-07-06
A unified diagramming skill for Claude Code and Antigravity IDE (Gemini CLI). It pairs multi-engine diagrammatic DSLs (PlantUML, C4, D2, Mermaid, Graphviz, ERD, BPMN) with editorial design guidelines, producing interactive SVG viewers, dark-mode gallery indexes, and shareable Kroki URLs — all from a single Python-backed skill.
README preview
# Kroki Editorial Diagrams A premium, unified diagramming skill for **Claude Code** and **Antigravity IDE** (Gemini CLI). It pairs **multi-engine diagrammatic DSLs** (PlantUML, C4, D2, Mermaid, Graphviz, ERD, BPMN) with **editorial design guidelines**, producing **interactive SVG viewers**, **dark-mode gallery indexes**, and **shareable Kroki URLs** — all from a single Python-backed skill. Maintained by [Labinator.com](https://labinator.com). --- ## Key Features 1. **Editorial Theme Out-of-the-Box** — Warm paper `#f5f5f5`, ink `#2d3142`, slate `#4f5d75`, rust-accent `#eb6c36`. Geist Sans/Mono + Instrument Serif typography. Dark-mode support via `prefers-color-scheme`. 2. **Engine Independence** — Auto-selects D2, PlantUML, C4, Structurizr, Mermaid, Graphviz, ERD, BPMN, WaveDrom, Vega-Lite, Nomnoml, Ditaa, SvgBob, Excalidraw, and more based on semantic use case. All engines are wired end-to-end. 3. **Diagram Options** — Pass engine-specific Kroki options via `--diagram-option key=value` (e.g. D2 theme, layout, sketch mode; PlantUML theme). 4. **Interactive SVG Viewer** — Click-to-highlight node focus, animated edge flow, dimmed inactive elements, pan/zoom with keyboard shortcuts. Full interactivity on D2, PlantUML, C4-PlantUML, Graphviz, and Structurizr; best-effort on Mermaid and ERD; limited/pan-zoom on all others. 5. **Automated Gallery Index** — Generates a `index.html` card-deck from all diagrams in a folder, with grid/list toggle and per-engine color coding. 6. **Narrow & Tall Layout Standard** — Max ~800px width, vertical flows enforced across all engines to prevent horizontal scrolling. 7. **Robust Error Handling** — Detects HTTP 4xx/5xx from Kroki via `urllib.error.HTTPError`. Configurable timeout (`--timeout`). Shareable Kroki URL printed on failure for manual debugging. 8. **Secure SVG Parsing** — Uses `defusedxml` to prevent XXE injection when wrapping SVG files in the interactive viewer.