zhongwei/gh-mhattingpete-claude-skills-marketplace-visual-documentation-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:40:19 +08:00
commit 87a970c077
26 changed files with 9131 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
skills/architecture-diagram-creator/assets/templates/architecture_components.html Normal file
View File

@@ -0,0 +1,304 @@
<!-- ========================================
ARCHITECTURE DIAGRAM SVG COMPONENTS
Reusable SVG patterns for architecture diagrams
======================================== -->
<!-- ===== SVG MARKERS & DEFINITIONS ===== -->
<defs>
<!-- Standard arrow marker -->
<marker id="arrowhead" markerWidth="10" markerHeight="10"
refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
</marker>
<!-- Green arrow marker (for success paths) -->
<marker id="arrowhead-green" markerWidth="10" markerHeight="10"
refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#48bb78"/>
</marker>
<!-- Blue arrow marker (for data flow) -->
<marker id="arrowhead-blue" markerWidth="10" markerHeight="10"
refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#4299e1"/>
</marker>
<!-- Orange arrow marker (for processing) -->
<marker id="arrowhead-orange" markerWidth="10" markerHeight="10"
refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#ed8936"/>
</marker>
</defs>
<!-- ===== DATA SOURCE BOX ===== -->
<!-- Blue box for data input sources -->
<g class="data-source-component">
<rect x="50" y="50" width="250" height="200" rx="15"
fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
<text x="175" y="85" text-anchor="middle" fill="white"
font-size="16" font-weight="bold">Source Name</text>
<text x="175" y="110" text-anchor="middle" fill="white"
font-size="12">Source Type</text>
<!-- Details section -->
<text x="175" y="140" text-anchor="middle" fill="white"
font-size="11" font-weight="bold">Details:</text>
<text x="175" y="160" text-anchor="middle" fill="white"
font-size="10">• Field 1</text>
<text x="175" y="175" text-anchor="middle" fill="white"
font-size="10">• Field 2</text>
<text x="175" y="190" text-anchor="middle" fill="white"
font-size="10">• Field 3</text>
</g>
<!-- ===== PROCESSING ENGINE BOX ===== -->
<!-- Orange box for processing/transformation logic -->
<g class="processing-component">
<rect x="450" y="200" width="300" height="150" rx="15"
fill="#ed8936" stroke="#c05621" stroke-width="3"/>
<text x="600" y="235" text-anchor="middle" fill="white"
font-size="16" font-weight="bold">Processing Engine</text>
<!-- Processing steps -->
<text x="600" y="260" text-anchor="middle" fill="white"
font-size="11">• Step 1: Description</text>
<text x="600" y="280" text-anchor="middle" fill="white"
font-size="11">• Step 2: Description</text>
<text x="600" y="300" text-anchor="middle" fill="white"
font-size="11">• Step 3: Description</text>
<text x="600" y="320" text-anchor="middle" fill="white"
font-size="11">• Step 4: Description</text>
</g>
<!-- ===== OUTPUT/RESULT BOX ===== -->
<!-- Green box for outputs and results -->
<g class="output-component">
<rect x="900" y="175" width="250" height="200" rx="15"
fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="1025" y="210" text-anchor="middle" fill="white"
font-size="16" font-weight="bold">Output Name</text>
<text x="1025" y="235" text-anchor="middle" fill="white"
font-size="11" font-weight="bold">Output Details:</text>
<!-- Output details -->
<text x="1025" y="255" text-anchor="middle" fill="white"
font-size="10">• Format: Type</text>
<text x="1025" y="270" text-anchor="middle" fill="white"
font-size="10">• Size: Amount</text>
<text x="1025" y="285" text-anchor="middle" fill="white"
font-size="10">• Destination: Location</text>
<!-- Status indicators -->
<text x="1025" y="310" text-anchor="middle" fill="white"
font-size="10">✓ Status indicator</text>
</g>
<!-- ===== AI/ML SERVICE BOX ===== -->
<!-- Purple box for AI/ML services -->
<g class="ai-service-component">
<rect x="320" y="400" width="250" height="120" rx="15"
fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>
<text x="445" y="435" text-anchor="middle" fill="white"
font-size="16" font-weight="bold">AI Service</text>
<text x="445" y="460" text-anchor="middle" fill="white"
font-size="11">Model/Provider Name</text>
<text x="445" y="480" text-anchor="middle" fill="white"
font-size="10">• Capability 1</text>
<text x="445" y="495" text-anchor="middle" fill="white"
font-size="10">• Capability 2</text>
</g>
<!-- ===== CONFIGURATION BOX ===== -->
<!-- Amber box for configuration and settings -->
<g class="config-component">
<rect x="470" y="60" width="180" height="100" rx="10"
fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
<text x="560" y="90" text-anchor="middle" fill="white"
font-size="14" font-weight="bold">Configuration</text>
<text x="560" y="110" text-anchor="middle" fill="white"
font-size="10">Config file</text>
<text x="560" y="125" text-anchor="middle" fill="white"
font-size="10">• Settings</text>
<text x="560" y="140" text-anchor="middle" fill="white"
font-size="10">• Parameters</text>
</g>
<!-- ===== SUPPORTING TOOL BOX ===== -->
<!-- Gray box for supporting tools/utilities -->
<g class="tool-component">
<rect x="750" y="240" width="200" height="70" rx="10"
fill="#718096" stroke="#4a5568" stroke-width="2"/>
<text x="850" y="265" text-anchor="middle" fill="white"
font-size="11" font-weight="bold">Tool Name</text>
<text x="850" y="283" text-anchor="middle" fill="white"
font-size="9">Description</text>
<text x="850" y="297" text-anchor="middle" fill="white"
font-size="9">Purpose</text>
</g>
<!-- ===== PIPELINE STAGE BOX ===== -->
<!-- Compact pipeline stage for multi-stage diagrams -->
<g class="pipeline-stage">
<rect x="50" y="50" width="200" height="100" rx="10"
fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="150" y="80" text-anchor="middle" fill="white"
font-size="14" font-weight="bold">Stage Name</text>
<text x="150" y="100" text-anchor="middle" fill="white"
font-size="10">Operation</text>
<text x="150" y="115" text-anchor="middle" fill="white"
font-size="10">Technology</text>
<text x="150" y="130" text-anchor="middle" fill="white"
font-size="10">Output format</text>
</g>
<!-- ===== LAYERED ARCHITECTURE COMPONENT ===== -->
<!-- Stack of layers for architecture diagrams -->
<g class="architecture-layer">
<!-- Layer 1 -->
<rect x="100" y="100" width="400" height="80" rx="10"
fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="300" y="145" text-anchor="middle" fill="white"
font-size="13" font-weight="bold">Layer 1: Data Sources</text>
<!-- Layer 2 -->
<rect x="100" y="200" width="400" height="80" rx="10"
fill="#ed8936" stroke="#c05621" stroke-width="2"/>
<text x="300" y="245" text-anchor="middle" fill="white"
font-size="13" font-weight="bold">Layer 2: Processing</text>
<!-- Layer 3 -->
<rect x="100" y="300" width="400" height="80" rx="10"
fill="#9f7aea" stroke="#6b46c1" stroke-width="2"/>
<text x="300" y="345" text-anchor="middle" fill="white"
font-size="13" font-weight="bold">Layer 3: Services</text>
<!-- Layer 4 -->
<rect x="100" y="400" width="400" height="80" rx="10"
fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
<text x="300" y="445" text-anchor="middle" fill="white"
font-size="13" font-weight="bold">Layer 4: Output</text>
</g>
<!-- ===== CONNECTORS & ARROWS ===== -->
<!-- Simple horizontal arrow -->
<g class="arrow-horizontal">
<path d="M 300 150 L 450 150" stroke="#2d3748"
stroke-width="3" marker-end="url(#arrowhead)"/>
<text x="375" y="140" text-anchor="middle" fill="#2d3748"
font-size="11" font-weight="bold">Label</text>
</g>
<!-- Diagonal arrow (down-right) -->
<g class="arrow-diagonal">
<path d="M 300 150 L 450 250" stroke="#2d3748"
stroke-width="3" marker-end="url(#arrowhead)"/>
<text x="360" y="190" fill="#2d3748"
font-size="11" font-weight="bold">Label</text>
</g>
<!-- Vertical arrow (downward) -->
<g class="arrow-vertical">
<path d="M 150 150 L 150 280" stroke="#2d3748"
stroke-width="3" marker-end="url(#arrowhead)"/>
<text x="160" y="215" fill="#2d3748"
font-size="11" font-weight="bold">Label</text>
</g>
<!-- L-shaped connector (right then down) -->
<g class="connector-l-shape">
<path d="M 300 150 L 450 150 L 450 280" stroke="#2d3748"
stroke-width="3" marker-end="url(#arrowhead)"/>
</g>
<!-- Dashed line (for optional/uncertain paths) -->
<g class="arrow-dashed">
<path d="M 300 150 L 450 150" stroke="#718096"
stroke-width="2" stroke-dasharray="5,5"
marker-end="url(#arrowhead)"/>
<text x="375" y="140" text-anchor="middle" fill="#718096"
font-size="10" font-style="italic">Optional</text>
</g>
<!-- ===== ANNOTATION/CALLOUT BOX ===== -->
<!-- Info box with border and background -->
<g class="annotation-box">
<rect x="880" y="150" width="220" height="120" rx="10"
fill="#fff5f5" stroke="#fc8181" stroke-width="2"/>
<text x="990" y="180" text-anchor="middle" fill="#742a2a"
font-size="12" font-weight="bold">⚠️ Important Note</text>
<text x="990" y="200" text-anchor="middle" fill="#5a1919"
font-size="9">Line 1 of note text</text>
<text x="990" y="215" text-anchor="middle" fill="#5a1919"
font-size="9">Line 2 of note text</text>
<text x="990" y="230" text-anchor="middle" fill="#5a1919"
font-size="9">Line 3 of note text</text>
<text x="990" y="245" text-anchor="middle" fill="#5a1919"
font-size="9">Line 4 of note text</text>
</g>
<!-- ===== REFERENCE TABLE ROW ===== -->
<!-- Table header row -->
<g class="table-header">
<rect x="50" y="50" width="140" height="40"
fill="#667eea" stroke="#5a67d8" stroke-width="2"/>
<text x="120" y="75" text-anchor="middle" fill="white"
font-size="12" font-weight="bold">Column 1</text>
<rect x="190" y="50" width="180" height="40"
fill="#667eea" stroke="#5a67d8" stroke-width="2"/>
<text x="280" y="75" text-anchor="middle" fill="white"
font-size="12" font-weight="bold">Column 2</text>
<rect x="370" y="50" width="140" height="40"
fill="#667eea" stroke="#5a67d8" stroke-width="2"/>
<text x="440" y="75" text-anchor="middle" fill="white"
font-size="12" font-weight="bold">Column 3</text>
</g>
<!-- Table data row -->
<g class="table-row">
<rect x="50" y="90" width="140" height="50"
fill="#e6fffa" stroke="#81e6d9" stroke-width="1"/>
<text x="120" y="120" text-anchor="middle" fill="#234e52"
font-size="11" font-weight="bold">Data 1</text>
<rect x="190" y="90" width="180" height="50"
fill="#e6fffa" stroke="#81e6d9" stroke-width="1"/>
<text x="280" y="120" text-anchor="middle" fill="#234e52"
font-size="10">Data 2</text>
<rect x="370" y="90" width="140" height="50"
fill="#e6fffa" stroke="#81e6d9" stroke-width="1"/>
<text x="440" y="120" text-anchor="middle" fill="#234e52"
font-size="10">Data 3</text>
</g>
<!-- ===== COLOR PALETTE REFERENCE ===== -->
<!--
Data Sources / Inputs: #4299e1 (blue) stroke: #2b6cb0
Processing / Logic: #ed8936 (orange) stroke: #c05621
AI/ML Services: #9f7aea (purple) stroke: #6b46c1
Output / Success: #48bb78 (green) stroke: #2f855a
Configuration: #f59e0b (amber) stroke: #d97706
Supporting Tools: #718096 (gray) stroke: #4a5568
Warning / Critical: #e53e3e (red) stroke: #c53030
Information / Teal: #38b2ac (teal) stroke: #2c7a7b
Special / Highlight: #805ad5 (purple2) stroke: #6b46c1
Text dark: #2d3748
Text medium: #4a5568
Text light: #718096
Background light: #f7fafc
Border light: #e2e8f0
-->

306
skills/architecture-diagram-creator/assets/templates/base_template.html Normal file
View File

@@ -0,0 +1,306 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[PROJECT_NAME] Architecture</title>
<style>
/* ===== RESET & BASE ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem;
min-height: 100vh;
}
/* ===== CONTAINER ===== */
.container {
max-width: 1400px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
padding: 3rem;
}
/* ===== TYPOGRAPHY ===== */
h1 {
font-size: 2.5rem;
color: #2d3748;
margin-bottom: 0.5rem;
text-align: center;
}
.subtitle {
text-align: center;
color: #718096;
font-size: 1.1rem;
margin-bottom: 2rem;
}
/* ===== SECTIONS ===== */
.section {
margin: 2rem 0;
}
.section-title {
font-size: 1.5rem;
color: #2d3748;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 3px solid #667eea;
}
/* ===== METRIC CARDS ===== */
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.metric-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1.5rem;
border-radius: 12px;
text-align: center;
color: white;
}
.metric-value {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.metric-label {
font-size: 0.9rem;
opacity: 0.9;
}
/* ===== FEATURE CARDS ===== */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 1rem 0;
}
.feature-card {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 1.5rem;
transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.feature-card h3 {
color: #667eea;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.feature-card ul {
list-style: none;
color: #4a5568;
line-height: 1.8;
}
.feature-card ul li:before {
content: "→ ";
color: #667eea;
font-weight: bold;
}
/* ===== DIAGRAMS ===== */
.diagram-container {
background: #f7fafc;
border-radius: 12px;
padding: 2rem;
margin: 1rem 0;
overflow-x: auto;
}
svg {
width: 100%;
height: auto;
display: block;
}
/* ===== LEGEND ===== */
.legend {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2rem;
padding: 1.5rem;
background: #f7fafc;
border-radius: 12px;
justify-content: center;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.legend-box {
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid #2d3748;
}
/* ===== FOOTER ===== */
footer {
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid #e2e8f0;
text-align: center;
color: #718096;
font-size: 0.9rem;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
body {
padding: 1rem;
}
.container {
padding: 1.5rem;
}
h1 {
font-size: 1.8rem;
}
.metric-grid,
.feature-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<!-- HEADER -->
<h1>[PROJECT_ICON] [PROJECT_NAME]</h1>
<p class="subtitle">[PROJECT_DESCRIPTION]</p>
<!-- KEY METRICS -->
<div class="metric-grid">
<!-- Metric cards will be inserted here -->
</div>
<!-- BUSINESS OBJECTIVES -->
<div class="section">
<h2 class="section-title">📊 Business Objectives & End Users</h2>
<div class="feature-grid">
<!-- Feature cards will be inserted here -->
</div>
</div>
<!-- DATA INPUT OVERVIEW -->
<div class="section">
<h2 class="section-title">📥 Data Input Overview</h2>
<div class="diagram-container">
<svg viewBox="0 0 1200 600">
<!-- Data flow diagram will be inserted here -->
</svg>
</div>
</div>
<!-- PROCESSING PIPELINE -->
<div class="section">
<h2 class="section-title">⚙️ Data Processing Pipeline</h2>
<div class="diagram-container">
<svg viewBox="0 0 1400 700">
<!-- Pipeline diagram will be inserted here -->
</svg>
</div>
</div>
<!-- FUNCTIONAL FEATURES -->
<div class="section">
<h2 class="section-title">✨ Functional Features</h2>
<div class="feature-grid">
<!-- Feature cards will be inserted here -->
</div>
</div>
<!-- NON-FUNCTIONAL FEATURES -->
<div class="section">
<h2 class="section-title">🛡️ Non-Functional Features</h2>
<div class="feature-grid">
<!-- Feature cards will be inserted here -->
</div>
</div>
<!-- SYSTEM ARCHITECTURE -->
<div class="section">
<h2 class="section-title">🏗️ System Architecture</h2>
<div class="diagram-container">
<svg viewBox="0 0 1400 800">
<!-- Architecture diagram will be inserted here -->
</svg>
</div>
</div>
<!-- DEPLOYMENT & USAGE -->
<div class="section">
<h2 class="section-title">🚀 Deployment & Usage</h2>
<div class="feature-grid">
<!-- Deployment info cards will be inserted here -->
</div>
</div>
<!-- LEGEND -->
<div class="legend">
<div class="legend-item">
<div class="legend-box" style="background: #4299e1;"></div>
<span>Data Sources</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #ed8936;"></div>
<span>Processing Logic</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #9f7aea;"></div>
<span>AI Services</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #48bb78;"></div>
<span>Output/Results</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #f59e0b;"></div>
<span>Configuration</span>
</div>
<div class="legend-item">
<div class="legend-box" style="background: #718096;"></div>
<span>Supporting Tools</span>
</div>
</div>
<!-- FOOTER -->
<footer>
<strong>[PROJECT_NAME] Architecture v[VERSION]</strong><br>
Generated: [DATE] | [SHORT_DESCRIPTION]<br>
Technologies: [TECH_STACK]
</footer>
</div>
</body>
</html>