diagram-design
Create polished, accessible, self-contained HTML/SVG diagrams for architecture, deployment, dependency graphs, workflows, data flows, Sankey flows, sequences, state machines and lifecycle maps, ER and database schemas, UML class, timelines, swimlanes, user journeys, story maps, kanban, Wardley maps, fishbone, charts (bar, waterfall, line, heatmap, treemap, scatter, polar), security views, and other editorial visual types. Redraw Mermaid, draw.io, and Excalidraw sources into a fresh layout, apply optional brand tokens or saved client profiles, add accessible explanatory motion, 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.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Diagram Design
- 0. Defaults and optional brand onboarding
- 1. Philosophy
- 2. When to Use
- 3. Selection: semantic pattern, then visual type
- Visual-type guide (41)
- Confirm before drawing
- 4. Universal Anti-patterns
Create diagrams as self-contained HTML files with inline SVG and an editorial design system. Forty-one visual types. Semantic patterns describe behavior independently; type references describe layout. Details load from references/ only when selected. -- The bundled references/style-guide.md is an immutable reference for the shipped default skin. Do not edit an installed skill's files while generating a project diagram. Use the default skin when the request does not specify a brand. If the user wants a brand match, load references/onboarding.md, propose the token mapping first, and write an approved project-local override under the injected Visuals: path. Apply that override to the current output and reuse it when the user asks for more diagrams in the same visual set. Saved client profiles are an optional brand source. When the project has a .diagram-design marker or the user names a profile, follow references/profiles.md marker-first and read the profile directly. Saving or updating a profile in its home-directory library needs the user's consent. Skip every profile step that writes the installed style-guide.md (copy-over load, working-copy header, reset); use the marker or a Visu
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- vanducng/skills
- Source file
- skills/diagram-design/SKILL.md
- Fixed revision
- c20411b8df8f821988c87689f6aefe142b6f9025
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: vanducng/skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-11T14:02:27.323Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.