diagram-designlisted

Create technical and product diagrams as standalone HTML files with inline SVG. Use for architecture, flow, sequence, state, data, process, and other diagrams; choose the appropriate type and follow its reference. For FluencyLoop product-overview and architectural-record diagrams, use the embedded fast path.
baokhang83/fluencyloop · ★ 44 · AI & Automation · score 79

Install: claude install-skill baokhang83/fluencyloop

# Diagram Design Create one self-contained HTML file with inline SVG and CSS. Use a diagram only when it explains a relationship, flow, or structure better than prose or a table. ## FluencyLoop embedded diagram fast path Use this path when FluencyLoop asks for either `docs/fluencyloop/diagrams/product-overview.html` or a file under `docs/fluencyloop/diagrams/records/`. For a product overview, its prose is always `docs/fluencyloop/distillations/product.md`; its companion is always `docs/fluencyloop/diagrams/product-overview.html`. Never write `docs/fluencyloop/product.md`. It is a focused companion inside FluencyLoop's local site, not a branded design-system deliverable. FluencyLoop owns the surrounding site design, but the diagram must still describe the product faithfully. Use a self-contained HTML document with inline SVG and CSS: no scripts, remote URLs, remote fonts, iframes, or embedded executable content. Support the reader's themes with local light tokens and a `:root[data-fluencyloop-theme="dark"]` token override. Choose the rendering path by topology, not by the convenience of the renderer: 1. Use the native renderer only when one of its layouts faithfully captures every material node and relationship: `linear` for a 2–6 step path, `hub` for a shared service/boundary with 2–7 direct participants, `merge` for inputs or short chains that end at one result, or `layered` for one-to-one adjacent-layer mappings. It supports 2–8 nodes and at most 10 edges. A