Architecture Diagram Creator
Skill ActiveCreate comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
To create comprehensive and visually appealing HTML architecture diagrams for projects, aiding in system documentation and high-level overviews.
Features
- Generate HTML architecture diagrams
- Include business context, data flows, and system architecture
- Create SVG visualizations for diagrams
- Structure documentation into multiple sections
- Utilize semantic colors and modern design
Use Cases
- Create architecture diagram for a project
- Generate high-level system overviews
- Document system architecture with data flows
- Visualize processing pipelines
Non-Goals
- Generating diagrams for non-architectural topics
- Creating interactive diagrams beyond static HTML/SVG
- Real-time collaboration or editing of diagrams
Maintenance
- warning:Commit recencyThe last commit was over 2 months ago (March 6, 2026), indicating potential lack of recent maintenance.
Trust
- warning:Issues AttentionThere are 6 open issues and 0 closed issues in the last 90 days, indicating slow or no maintainer response to open issues.
Installation
First, add the marketplace
/plugin marketplace add mhattingpete/claude-skills-marketplace/plugin install visual-documentation-plugin@mhattingpete-claude-skillsQuality Score
Trust Signals
Similar Extensions
Pathfinder
100Map a codebase into feature-grouped flowcharts, identify duplicated concerns across features, and propose a unified architecture. Use when asked to "find the ideal path," unify duplicated systems, or audit architecture before a refactor. Emits a proposed unified flowchart plus per-system /make-plan prompts.
Presentation Styling
100Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Presentation Structure
100Knowledge about the presentation slide format, weight system, navigation, and section structure
Baoyu Diagram
98Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file.
Plannotator Visual Explainer
98Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts. Plans and PR explainers follow Plannotator's prescriptive approach; all other visual content delegates to nicobailon/visual-explainer.
V3 Ddd Architecture
100Domain-Driven Design architecture for claude-flow v3. Implements modular, bounded context architecture with clean separation of concerns and microkernel pattern.