diagram-renderinglisted

Use when a fast hosted-render path is needed to turn D2, Mermaid, Graphviz, or Chart.js text into an inline-ready PNG for chat (Telegram, Discord, Slack) or a saved image. Handles the hosted-render + local-rasterize plumbing and platform gotchas (snap-chromium sandbox, D2-is-SVG-only, blank-render detection, transient host retries) so any fleet agent gets a clean picture on the first try. Prefer excalidraw for hand-drawn whiteboards and architecture-diagram for offline, pixel-controlled dark SVG cards; do not send sensitive content to public render hosts.
TechNickAI/hermes-skills · ★ 0 · AI & Automation · score 76

Install: claude install-skill TechNickAI/hermes-skills

# Diagram Rendering 📈 Draw a diagram or chart from text and deliver it **inline in chat**. One script, `scripts/render.py`, covers three diagram languages and data charts, and always ends in a PNG (or an inline image URL) — because chat platforms render images, not `.d2`/`.mmd`/`.dot`/`.svg` source. ## Overview Two jobs, one tool: - **Diagrams** (flowcharts, architecture, sequence, ER) — you write terse text in **D2**, **Mermaid**, or **Graphviz**; the hosted renderer (Kroki) returns an SVG and the script rasterizes it locally to a crisp 2× PNG. - **Data charts** (line, bar, pie, etc.) — you write a **Chart.js** JSON config; **QuickChart** renders it, either as a local PNG (default) or a short inline URL. **Pick the language by the tradeoff you want:** | Language | Layout | Tradeoff | | ------------ | -------------------------------- | --------------------------------------------------------------------- | | **D2** | modern, rounded, auto-laid-out | best-looking default; layout can wander on very dense graphs | | **Graphviz** | strict orthogonal, deterministic | most robust auto-layout for dense/dependency graphs; visually stiffer | | **Mermaid** | simple flow/sequence | fastest to write; plainest default styling | **Charts** (QuickChart) cover the data side — P&L curves, win-rate bars, category breakdowns. Same tool