Vibe Coding Discoverdiagram-design
View on GitHubEditorial diagram design for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
An Agent Skill (Claude Code, Codex, Pi, Factory Droid plugin) that generates editorial-quality diagrams as self-contained HTML+SVG, with ~50 layout types and importers for Mermaid, draw.io, and Excalidraw. No build step, JS, or external images.
Use Cases
Generate editorial-quality architecture diagramsCreate flowcharts and sequence diagramsDraw ER, UML class, and DB schema diagramsRender charts (bar, line, scatter, radar, treemap, sankey)Convert Mermaid/draw.io/Excalidraw sources into themed diagramsMatch diagram styling to a brand by reading a websiteProduce self-contained HTML+SVG diagrams with light/dark/editorial variants
Built With
- Language
- HTML
- Frameworks
- Claude Code · Codex · Factory Droid · Pi · Agent Skills
Tags
agent-skills · diagrams · svg · claude-code · codex · data-visualization · mermaid-import · drawio · excalidraw · html · editorial-design · flowchart · architecture-diagram · claude-plugin · self-contained-html · no-build-step