Architecture diagrams
2 listings
Skills
Build interactive diagrams from a description or a repo
This skill creates interactive diagrams as self-contained HTML pages with embedded SVG, working from a plain-language description, Mermaid, or evidence read from a repository. It covers system architecture, request sequences, state machines, data models, class contracts, and timelines, with dark and light themes and export to image, SVG, or WebM. Each diagram is checked against a schema before it is delivered. It is not meant to replace charts of numbers or dashboards.
Draw diagrams and charts as HTML with SVG
This skill draws diagrams and charts as standalone HTML pages that use inline SVG, styled with an editorial look. It covers 45 visual types, from architecture, flowcharts, and sequence diagrams to org charts, Gantt charts, and database schemas, and it can import files from Mermaid, Excalidraw, and draw.io. On first use in a project it checks the style guide and asks whether to customize it, for example from a website URL or pasted tokens. Results can be exported to PNG or SVG.