diagram-design
SolidCreate 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.
Install
Quality Score: 84/100
Skill Content
Details
- Author
- baokhang83
- Repository
- baokhang83/fluencyloop
- Created
- 1 months ago
- Last Updated
- 5 days ago
- Language
- HTML
- License
- Apache-2.0
Bundled in these plugins
Similar Skills
Semantically similar based on skill content — not just same category
diagram-design
Design editorial-quality diagrams as self-contained inline SVG — architecture diagrams, flows, sequences, state machines, data models, timelines, layer stacks, quadrants, comparisons, and system maps. Use when explaining how a system is arranged, how a process moves, how components depend on each other, or how options compare; when a Mermaid or draw.io diagram needs to be converted into a document's design system; or when an existing diagram looks auto-generated and needs editorial judgment. Do not use for quantitative charts of measured data (use chart-design), for the surrounding report structure (use analytical-document-design), for UI mockups or wireframes, or for producing editable .drawio files.
diagram-design
Create polished, accessible, self-contained HTML/SVG diagrams for architecture, workflows, data flows, sequences, state machines, ER models, timelines, swimlanes, charts, security views, and other editorial visual types. Redraw Mermaid and draw.io sources into a fresh layout, apply optional brand tokens, and verify geometry, accessibility, motion, and single-file safety. Use when the output should be an editable HTML/SVG artifact rather than an ASCII sketch, generated raster image, or editable whiteboard canvas.
diagram-concept
Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark mode. Best suited for educational and non-software visuals — physics setups, chemistry mechanisms, math curves, physical objects (aircraft, turbines, smartphones, mechanical watches), anatomy, floor plans, cross-sections, narrative journeys (lifecycle of X, process of Y), hub-spoke system integrations (smart city, IoT), and exploded layer views. If a more specialized skill exists for the subject (dedicated software/cloud architecture, hand-drawn sketches, animated explainers, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback with a clean educational look. Ships with 15 example diagrams.