Technical Diagram Skill
Technical Diagram Skill renders system architectures, workflows, sequences, data pipelines, and state machines as self-contained HTML files with dark/light theming, native export to PNG/JPEG/WebP, and dual-theme SVG output. Choose from five diagram types—architecture, workflow, sequence, dataflow, and lifecycle—each with a JSON schema and renderer, or hand-place SVG when command execution is unavailable.
Technical Diagram Skill creates professional technical diagrams as interactive HTML files with theme toggle and multi-format export.
AI-generated summary based on this skill's SKILL.md
Install
mingchen666/Reviva/technical-diagram-skill · repository language: HTML
git clone https://github.com/mingchen666/Reviva
cp -r Reviva ~/.claude/skills/technical-diagram-skillgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What diagram types can Technical Diagram Skill create?
Technical Diagram Skill supports five core diagram types: architecture diagrams for system design, workflow diagrams for process flows, sequence diagrams for interactions, dataflow diagrams for data pipelines, and lifecycle diagrams for state machines. Each type has a dedicated JSON schema and renderer, letting you choose the format that best fits your engineering documentation needs.
How do I draw architecture diagrams with this skill?
Technical Diagram Skill generates architecture diagrams by accepting a JSON schema that defines your system components and connections. The skill renders the diagram as a self-contained HTML file with built-in dark and light theming, so you can visualize your system design immediately and share it without external dependencies.
What export formats does Technical Diagram Skill support?
Technical Diagram Skill exports diagrams natively to PNG, JPEG, and WebP formats for raster images, plus dual-theme SVG output for scalable vector graphics. All exports are generated directly from the HTML rendering, making it easy to embed diagrams in documentation or presentations.
Can I create UML diagrams with Technical Diagram Skill?
Yes, Technical Diagram Skill can design UML diagrams programmatically through its sequence and lifecycle diagram types, which capture interactions and state transitions. You define the diagram structure in JSON and the skill renders it with full theming support and export options.
What happens if command execution is unavailable?
Technical Diagram Skill allows you to hand-place SVG when command execution is unavailable, giving you a fallback method to create diagrams. You retain full control over the visual output even when automated rendering cannot run.
How does Technical Diagram Skill handle theming?
Technical Diagram Skill includes native dark and light theming built into every HTML rendering. You can switch themes instantly within the rendered file, and both themes are included in dual-theme SVG exports for maximum flexibility across different documentation contexts.