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
Decision gist · record as of 2026-07-25
Architecture Diagram Creator generates interactive HTML diagrams visualizing system data flows, business context, and layered technical architecture. 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.
Use it when
- Yes.
- architecture-diagram-creator visualizes data flow and processing pipelines by mapping how information moves through your system layers.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
mhattingpete/claude-skills-marketplace/architecture-diagram-creator · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create visual architecture diagrams with data flows and system layers”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Build interactive HTML flowcharts and process diagrams with color-coded nodes, decision points, and connectors. The skill breaks down workflows into visual steps, identifies decision branches, and renders clean layouts with consistent spacing for easy comprehension.
Dashboard Creator generates self-contained HTML dashboards featuring KPI metric cards with trend indicators, SVG-based bar/pie/line charts, and progress bars. Perfect for building performance monitoring interfaces and analytics displays from your data.
This skill spawns three independent subagents to tackle problems from different angles—prioritizing simplicity, performance, or extensibility for code; top-down, bottom-up, or lateral thinking for design; or expert, pragmatic, or innovative perspectives for creative work. Each solution is scored against correctness, completeness, quality, clarity, and elegance, then the winner is returned with trade-off analysis and guidance on when alternatives might suit better.
Technical Doc Creator builds polished HTML documentation for APIs and systems, complete with endpoint references, code samples, and architecture diagrams. It structures content with getting started guides, request/response examples, and syntax-highlighted code blocks. Perfect for creating developer-facing documentation that's ready to share.
Timeline Creator builds interactive HTML visualizations for project planning, rendering Gantt charts with task durations, phase groupings, and milestone markers. It extracts project dates and schedules, calculates progress percentages, and applies semantic color coding to show task status at a glance.
Codebase Documenter analyzes your project structure and code to produce organized markdown documentation spanning architecture, components, integrations, and development practices. It maps directory organization, traces execution paths, and synthesizes findings into multiple documents or a single comprehensive guide with Mermaid diagrams and code examples.
More skills html-draft (MIT) · Blueprinter (unlicensed) · baoyu-diagram (MIT) · concept-diagrams (MIT) · fireworks-tech-graph (MIT)