architecture-diagram-creator
This skill produces comprehensive HTML architecture diagrams that map business objectives, data flows, processing pipelines, and system components in a single visual document. It structures technical architecture across layers—data, processing, services, and outputs—with SVG visualizations and semantic color coding for clarity.
Architecture Diagram Creator generates interactive HTML diagrams visualizing system data flows, business context, and layered technical architecture.
AI-generated summary based on this skill's SKILL.md
Install
mhattingpete/claude-skills-marketplace/architecture-diagram-creator · repository language: HTML
git clone https://github.com/mhattingpete/claude-skills-marketplace
cp -r claude-skills-marketplace/visual-documentation-plugin/skills/architecture-diagram-creator ~/.claude/skills/architecture-diagram-creatorFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What does architecture-diagram-creator do?
architecture-diagram-creator produces comprehensive HTML architecture diagrams that map business objectives, data flows, processing pipelines, and system components in a single visual document. It structures technical architecture across layers—data, processing, services, and outputs—with SVG visualizations and semantic color coding for clarity.
Can architecture-diagram-creator generate system architecture overview HTML?
Yes. architecture-diagram-creator generates HTML documentation for project technical architecture, creating complete visual system overviews with components and interactions embedded directly in the output document.
How does architecture-diagram-creator visualize data flow?
architecture-diagram-creator visualizes data flow and processing pipelines by mapping how information moves through your system layers. It uses semantic color coding and SVG graphics to show the complete journey from inputs through processing to outputs.
What layers does architecture-diagram-creator include?
architecture-diagram-creator structures diagrams across four key layers: data (sources and storage), processing (transformation logic), services (business capabilities), and outputs (delivery mechanisms). This layered approach clarifies how system components interact.
Can I use architecture-diagram-creator for deployment models?
Yes. architecture-diagram-creator visualizes business context, processing pipelines, and deployment models, allowing you to document how your system is deployed and how different environments interact with your architecture.
What is the license for architecture-diagram-creator?
architecture-diagram-creator is released under the Apache-2.0 license, which permits commercial and private use with appropriate attribution.
SKILL.md
rendered from the published skill — quoted content, verbatim
Architecture Diagram Creator
Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.
When to Use
- "Create architecture diagram for [project]"
- "Generate high-level overview"
- "Document system architecture"
- "Show data flow and processing pipeline"
Components to Include
- Business Context: objectives, users, value, metrics
- Data Flow: sources → processing → outputs with SVG diagram
- Processing Pipeline: multi-stage visualization
- System Architecture: layered components (data/processing/services/output)
- Features: functional and non-functional requirements
- Deployment: model, prerequisites, workflows
HTML Structure
```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>[Project]
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 4 files
visual-documentation-plugin/skills/architecture-diagram-creator/SKILL.md
visual-documentation-plugin/skills/architecture-diagram-creator/assets/templates/architecture_components.html
visual-documentation-plugin/skills/architecture-diagram-creator/assets/templates/base_template.html
visual-documentation-plugin/skills/architecture-diagram-creator/references/example_architecture.html