Flowchart Creator

Name: Flowchart Creator
Author: mhattingpete

mhattingpete/claude-skills-marketplace

570 installs
656 repo stars
Updated July 25, 2026
mhattingpete/claude-skills-marketplace

flowchart-creator is an agent skill that generates standalone HTML and SVG flowcharts with decision trees and swimlanes for developers documenting workflows and product logic.

About

flowchart-creator is a visual-documentation-plugin skill from mhattingpete/claude-skills-marketplace with 426 installs on skills.sh. It creates interactive HTML process diagrams using SVG nodes for start/end rounded rectangles, blue process boxes, orange decision diamonds, labeled arrows, and optional swimlanes with a fixed color system (#48bb78, #e53e3e, #4299e1, #f59e0b). Agents activate when users request flowcharts, process diagrams, workflow visualizations, or decision trees. The workflow breaks processes into steps, lays out nodes vertically or horizontally with roughly 100px spacing, connects branches, and writes a standalone `[process]-flowchart.html` file. Developers reach for flowchart-creator to turn product specs or architecture decisions into browser-openable visuals without dedicated diagram SaaS tools. Part of the visual-documentation-plugin alongside architecture-diagram-creator and timeline-creator skills. Node taxonomy covers five SVG primitives—start/end, process, decision, arrows, swimlanes—with semantic colors documented for stakeholder-ready HTML exports opened directly in a browser.

Converts text descriptions into professional flowcharts and diagrams
Works with Mermaid, PlantUML, and SVG output formats
Agent-friendly visual artifacts that reduce miscommunication
Supports complex decision trees, user journeys, and system flows
One-command generation from natural language prompts

Flowchart Creator by the numbers

570 all-time installs (skills.sh)
+18 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #700 of 3,282 Productivity & Planning skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill flowchart-creator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/mhattingpete/claude-skills-marketplace/flowchart-creator.svg)](https://skillselion.com/skills/mhattingpete/claude-skills-marketplace/flowchart-creator)

Installs	570
repo stars	★ 656
Last updated	July 25, 2026
Repository	mhattingpete/claude-skills-marketplace ↗

How do you generate HTML flowcharts from process specs?

Turn product specs, user flows, or architecture decisions into clear, visual flowcharts that agents and stakeholders can instantly understand.

Who is it for?

Developers and technical writers who need quick SVG HTML flowcharts from specs without opening a separate diagram editor.

Skip if: Teams requiring collaborative cloud diagram editing, automatic code-to-diagram sync, or non-HTML export formats should skip flowchart-creator.

When should I use this skill?

User asks for a flowchart, process diagram, workflow visualization, or decision tree for a described process.

What you get

Standalone HTML flowchart files with SVG nodes, labeled decision branches, and optional swimlane groupings.

Standalone HTML flowchart files
SVG process and decision-tree diagrams

By the numbers

426 installs listed on skills.sh for mhattingpete/claude-skills-marketplace/flowchart-creator
Defines five SVG node types including optional swimlanes with 100px spacing guidance

Files

SKILL.mdMarkdownGitHub ↗

Flowchart Creator

Create interactive HTML flowcharts and process diagrams.

When to Use

"Create flowchart for [process]"
"Generate process flow diagram"
"Make decision tree for [workflow]"
"Show workflow visualization"

Components

1. Start/End nodes: rounded rectangles (#48bb78 green, #e53e3e red) 2. Process boxes: rectangles (#4299e1 blue) 3. Decision diamonds: diamonds (#f59e0b orange) 4. Arrows: connecting paths with labels 5. Swimlanes: grouped sections (optional)

HTML Structure

<!DOCTYPE html>
<html>
<head>
  <title>[Process] Flowchart</title>
  <style>
    body { font-family: system-ui; }
    svg { max-width: 100%; }
    .start-end { fill: #48bb78; }
    .process { fill: #4299e1; }
    .decision { fill: #f59e0b; }
  </style>
</head>
<body>
  <h1>[Process Name] Flowchart</h1>
  <svg viewBox="0 0 800 600">
    <!-- flowchart nodes and connectors -->
  </svg>
</body>
</html>

Node Patterns

<!-- Start/End (rounded rect) -->
<rect x="350" y="50" width="100" height="50" rx="25" class="start-end"/>
<text x="400" y="80" text-anchor="middle">Start</text>

<!-- Process box -->
<rect x="350" y="150" width="100" height="60" class="process"/>
<text x="400" y="185" text-anchor="middle">Process</text>

<!-- Decision diamond -->
<path d="M400,250 L450,280 L400,310 L350,280 Z" class="decision"/>
<text x="400" y="285" text-anchor="middle">Decision?</text>

<!-- Arrow -->
<path d="M400,100 L400,150" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>

Workflow

1. Break down process into steps 2. Identify decision points 3. Layout nodes vertically or horizontally 4. Connect with arrows 5. Add labels to decision branches 6. Write to [process]-flowchart.html

Keep layout clean, use consistent spacing (100px between nodes).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[DOCUMENT_TITLE]</title>
    <style>
        /* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 40px 20px;
            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: 40px;
        }

        /* ===== TYPOGRAPHY ===== */
        h1 {
            text-align: center;
            color: #2d3748;
            font-size: 2.5em;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .subtitle {
            text-align: center;
            color: #718096;
            font-size: 1.1em;
            margin-bottom: 40px;
        }

        h2.section-title {
            font-size: 1.8em;
            color: #2d3748;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #667eea;
        }

        h3 {
            font-size: 1.4em;
            color: #2d3748;
            margin-bottom: 15px;
        }

        /* ===== LAYOUT SECTIONS ===== */
        .section {
            margin-bottom: 60px;
        }

        .diagram-container {
            background: #f7fafc;
            border-radius: 15px;
            padding: 30px;
            margin: 20px 0;
            border: 2px solid #e2e8f0;
        }

        /* ===== METRIC CARDS ===== */
        .metric-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .metric-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .metric-value {
            font-size: 2.5em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .metric-label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        /* ===== CODE BLOCKS ===== */
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            overflow-x: auto;
            margin: 20px 0;
            line-height: 1.6;
        }

        .highlight {
            color: #fbbf24;
            font-weight: bold;
        }

        /* ===== EXAMPLE BOXES ===== */
        .example-box {
            background: #fff;
            border: 2px solid #667eea;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
        }

        .example-title {
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        /* ===== LEGEND ===== */
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
            padding: 20px;
            background: #edf2f7;
            border-radius: 10px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .legend-box {
            width: 30px;
            height: 30px;
            border-radius: 5px;
            border: 2px solid #2d3748;
        }

        /* ===== SVG STYLING ===== */
        svg {
            width: 100%;
            height: auto;
        }

        svg text {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* ===== FOOTER ===== */
        .footer {
            text-align: center;
            margin-top: 60px;
            padding: 30px;
            background: #f7fafc;
            border-radius: 10px;
        }

        .footer p {
            margin: 10px 0;
        }

        .footer-main {
            font-size: 1.1em;
            color: #4a5568;
            font-weight: 500;
        }

        .footer-sub {
            font-size: 0.95em;
            color: #718096;
        }

        .footer-meta {
            font-size: 0.85em;
            color: #a0aec0;
            margin-top: 15px;
        }

        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }

            h1 {
                font-size: 1.8em;
            }

            .section-title {
                font-size: 1.4em;
            }

            .metric-grid {
                grid-template-columns: 1fr;
            }

            .metric-value {
                font-size: 2em;
            }

            .legend {
                flex-direction: column;
                gap: 10px;
            }
        }

        /* ===== UTILITY CLASSES ===== */
        .text-center { text-align: center; }
        .mt-20 { margin-top: 20px; }
        .mb-20 { margin-bottom: 20px; }
        .p-20 { padding: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>[DOCUMENT_TITLE]</h1>
        <p class="subtitle">[DOCUMENT_SUBTITLE]</p>

        <!-- METRIC CARDS SECTION (Optional) -->
        <div class="metric-grid">
            <div class="metric-card">
                <div class="metric-value">[VALUE_1]</div>
                <div class="metric-label">[LABEL_1]</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">[VALUE_2]</div>
                <div class="metric-label">[LABEL_2]</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">[VALUE_3]</div>
                <div class="metric-label">[LABEL_3]</div>
            </div>
        </div>

        <!-- MAIN CONTENT SECTIONS -->
        <div class="section">
            <h2 class="section-title">1. [SECTION_TITLE]</h2>

            <div class="diagram-container">
                <!-- SVG diagrams go here -->
                <svg viewBox="0 0 1200 600">
                    <!-- SVG content -->
                </svg>
            </div>

            <div class="example-box">
                <div class="example-title">[EXAMPLE_TITLE]</div>
                <p>[EXAMPLE_CONTENT]</p>
            </div>

            <div class="code-block">
<span class="highlight">[HIGHLIGHTED_TERM]:</span> [CODE_CONTENT]
            </div>
        </div>

        <!-- LEGEND SECTION (Optional) -->
        <div class="legend">
            <div class="legend-item">
                <div class="legend-box" style="background: #4299e1;"></div>
                <span>[LEGEND_ITEM_1]</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #48bb78;"></div>
                <span>[LEGEND_ITEM_2]</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #f59e0b;"></div>
                <span>[LEGEND_ITEM_3]</span>
            </div>
        </div>

        <!-- FOOTER -->
        <div class="footer">
            <p class="footer-main"><strong>[FOOTER_MAIN_TEXT]</strong></p>
            <p class="footer-sub">[FOOTER_SUB_TEXT]</p>
            <p class="footer-meta">[FOOTER_META_TEXT]</p>
        </div>
    </div>
</body>
</html>

<!-- FLOWCHART COMPONENTS LIBRARY -->
<!-- Copy and customize these SVG patterns for process flow diagrams -->

<svg viewBox="0 0 1200 800" style="width: 100%; height: auto;">

    <!-- ===== ARROW MARKER DEFINITIONS ===== -->
    <!-- Always include in <defs> section -->
    <defs>
        <!-- Standard arrow -->
        <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
            <polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
        </marker>

        <!-- Colored arrows for different paths -->
        <marker id="arrowhead-success" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
            <polygon points="0 0, 10 3, 0 6" fill="#48bb78"/>
        </marker>

        <marker id="arrowhead-error" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
            <polygon points="0 0, 10 3, 0 6" fill="#f56565"/>
        </marker>

        <marker id="arrowhead-warning" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
            <polygon points="0 0, 10 3, 0 6" fill="#f59e0b"/>
        </marker>
    </defs>

    <!-- ===== BASIC SHAPES ===== -->

    <!-- Rounded Rectangle (Process Box) -->
    <rect x="50" y="50" width="200" height="100" rx="10"
          fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
    <text x="150" y="95" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
        Process Step
    </text>
    <text x="150" y="115" text-anchor="middle" fill="white" font-size="12">
        Subtitle or detail
    </text>

    <!-- Circle (Start/End Node) -->
    <circle cx="400" cy="100" r="50"
            fill="#48bb78" stroke="#2f855a" stroke-width="3" opacity="0.9"/>
    <text x="400" y="105" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
        START
    </text>

    <!-- Diamond (Decision Node) -->
    <path d="M 600 50 L 700 50 L 750 100 L 700 150 L 500 150 L 450 100 Z"
          fill="#fbbf24" stroke="#d97706" stroke-width="3"/>
    <text x="600" y="95" text-anchor="middle" font-size="14" font-weight="bold">
        Decision?
    </text>
    <text x="600" y="115" text-anchor="middle" font-size="11">
        Yes/No
    </text>

    <!-- Hexagon (Preparation/Setup) -->
    <path d="M 900 75 L 1050 75 L 1100 100 L 1050 125 L 900 125 L 850 100 Z"
          fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>
    <text x="975" y="105" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
        Setup/Config
    </text>

    <!-- ===== ARROWS & CONNECTORS ===== -->

    <!-- Straight arrow (horizontal) -->
    <path d="M 250 100 L 350 100" stroke="#2d3748" stroke-width="3"
          marker-end="url(#arrowhead)"/>

    <!-- Straight arrow (vertical) -->
    <path d="M 600 150 L 600 220" stroke="#2d3748" stroke-width="3"
          marker-end="url(#arrowhead)"/>

    <!-- L-shaped connector -->
    <path d="M 750 100 L 850 100 L 850 200 L 950 200" stroke="#2d3748" stroke-width="3"
          fill="none" marker-end="url(#arrowhead)"/>

    <!-- Curved connector (bezier) -->
    <path d="M 150 150 Q 150 250 300 250" stroke="#2d3748" stroke-width="3"
          fill="none" marker-end="url(#arrowhead)"/>

    <!-- Dashed line (optional/uncertain path) -->
    <path d="M 400 150 L 400 250" stroke="#cbd5e0" stroke-width="2"
          stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>

    <!-- ===== LABELS ON ARROWS ===== -->

    <!-- YES/NO labels for decision branches -->
    <text x="770" y="90" text-anchor="middle" fill="#2d3748" font-weight="bold" font-size="13">
        YES
    </text>
    <text x="420" y="140" text-anchor="middle" fill="#2d3748" font-weight="bold" font-size="13">
        NO
    </text>

    <!-- ===== STATUS BOXES ===== -->

    <!-- Success status -->
    <g id="success-box">
        <rect x="100" y="300" width="180" height="100" rx="10"
              fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
        <text x="190" y="335" text-anchor="middle" fill="white" font-size="15" font-weight="bold">
            ✓ SUCCESS
        </text>
        <text x="190" y="360" text-anchor="middle" fill="white" font-size="12">
            Operation Complete
        </text>
        <text x="190" y="380" text-anchor="middle" fill="white" font-size="11">
            Additional details
        </text>
    </g>

    <!-- Error status -->
    <g id="error-box">
        <rect x="350" y="300" width="180" height="100" rx="10"
              fill="#f56565" stroke="#c53030" stroke-width="3"/>
        <text x="440" y="335" text-anchor="middle" fill="white" font-size="15" font-weight="bold">
            ✗ ERROR
        </text>
        <text x="440" y="360" text-anchor="middle" fill="white" font-size="12">
            Operation Failed
        </text>
        <text x="440" y="380" text-anchor="middle" fill="white" font-size="11">
            Error details
        </text>
    </g>

    <!-- Warning/Uncertain status -->
    <g id="warning-box">
        <rect x="600" y="300" width="180" height="100" rx="10"
              fill="#f59e0b" stroke="#d97706" stroke-width="3"/>
        <text x="690" y="335" text-anchor="middle" fill="white" font-size="15" font-weight="bold">
            ⚠ WARNING
        </text>
        <text x="690" y="360" text-anchor="middle" fill="white" font-size="12">
            Needs Attention
        </text>
        <text x="690" y="380" text-anchor="middle" fill="white" font-size="11">
            Warning details
        </text>
    </g>

    <!-- In-Progress status -->
    <g id="progress-box">
        <rect x="850" y="300" width="180" height="100" rx="10"
              fill="#ed8936" stroke="#c05621" stroke-width="3"/>
        <text x="940" y="335" text-anchor="middle" fill="white" font-size="15" font-weight="bold">
            ⟳ IN PROGRESS
        </text>
        <text x="940" y="360" text-anchor="middle" fill="white" font-size="12">
            Processing...
        </text>
        <text x="940" y="380" text-anchor="middle" fill="white" font-size="11">
            Status details
        </text>
    </g>

    <!-- ===== SWIMLANES ===== -->

    <!-- Background rectangles for different process areas -->
    <rect x="50" y="450" width="350" height="300" rx="10"
          fill="#e6f2ff" stroke="#4299e1" stroke-width="2" opacity="0.3"/>
    <text x="225" y="480" text-anchor="middle" font-size="16" font-weight="bold" fill="#2d3748">
        Swimlane 1: Frontend
    </text>

    <rect x="450" y="450" width="350" height="300" rx="10"
          fill="#e6ffe6" stroke="#48bb78" stroke-width="2" opacity="0.3"/>
    <text x="625" y="480" text-anchor="middle" font-size="16" font-weight="bold" fill="#2d3748">
        Swimlane 2: Backend
    </text>

    <rect x="850" y="450" width="300" height="300" rx="10"
          fill="#fff5e6" stroke="#f59e0b" stroke-width="2" opacity="0.3"/>
    <text x="1000" y="480" text-anchor="middle" font-size="16" font-weight="bold" fill="#2d3748">
        Swimlane 3: Database
    </text>

    <!-- ===== GROUPINGS ===== -->

    <!-- Dashed box for related items -->
    <rect x="100" y="500" width="250" height="150" rx="8"
          fill="none" stroke="#9f7aea" stroke-width="2" stroke-dasharray="8,4"/>
    <text x="225" y="525" text-anchor="middle" font-size="13" fill="#6b46c1" font-weight="bold">
        Related Process Group
    </text>

    <!-- Small process boxes within swimlane -->
    <rect x="120" y="540" width="100" height="60" rx="8"
          fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
    <text x="170" y="575" text-anchor="middle" fill="white" font-size="12">
        Sub-process
    </text>

    <rect x="230" y="540" width="100" height="60" rx="8"
          fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
    <text x="280" y="575" text-anchor="middle" fill="white" font-size="12">
        Sub-process
    </text>

    <path d="M 220 570 L 230 570" stroke="#2d3748" stroke-width="2"
          marker-end="url(#arrowhead)"/>

    <!-- ===== NOTES/ANNOTATIONS ===== -->

    <!-- Callout box with line -->
    <rect x="900" y="550" width="150" height="80" rx="5"
          fill="#fff" stroke="#cbd5e0" stroke-width="2"/>
    <text x="975" y="575" text-anchor="middle" font-size="11" fill="#4a5568">
        Note: This is an
    </text>
    <text x="975" y="595" text-anchor="middle" font-size="11" fill="#4a5568">
        annotation or
    </text>
    <text x="975" y="615" text-anchor="middle" font-size="11" fill="#4a5568">
        additional detail
    </text>

    <!-- Leader line from callout to target -->
    <path d="M 900 590 L 850 590" stroke="#cbd5e0" stroke-width="1"
          stroke-dasharray="3,3"/>

</svg>

<!-- ===== USAGE EXAMPLES ===== -->

<!--
SIMPLE LINEAR FLOW:
Start → Process → Decision → (Yes → Success) or (No → Error)

<svg viewBox="0 0 1200 400">
    <defs>
        <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
            <polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
        </marker>
    </defs>

    <circle cx="150" cy="200" r="50" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
    <text x="150" y="205" text-anchor="middle" fill="white" font-weight="bold">START</text>

    <path d="M 200 200 L 300 200" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>

    <rect x="300" y="150" width="200" height="100" rx="10" fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
    <text x="400" y="205" text-anchor="middle" fill="white" font-weight="bold">Process Step</text>

    <path d="M 500 200 L 600 200" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>

    <path d="M 700 150 L 800 150 L 850 200 L 800 250 L 600 250 L 550 200 Z"
          fill="#fbbf24" stroke="#d97706" stroke-width="3"/>
    <text x="700" y="205" text-anchor="middle" font-weight="bold">Decision?</text>

    <path d="M 850 200 L 950 200" stroke="#2d3748" stroke-width="3" marker-end="url(#arrowhead)"/>
    <text x="895" y="190" text-anchor="middle" fill="#2d3748" font-weight="bold">YES</text>

    <rect x="950" y="170" width="150" height="60" rx="10" fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
    <text x="1025" y="205" text-anchor="middle" fill="white" font-weight="bold">SUCCESS</text>

    <path d="M 700 250 L 700 320 L 1000 320" stroke="#f56565" stroke-width="3" marker-end="url(#arrowhead)"/>
    <text x="720" y="290" text-anchor="start" fill="#2d3748" font-weight="bold">NO</text>

    <rect x="1000" y="290" width="150" height="60" rx="10" fill="#f56565" stroke="#c53030" stroke-width="3"/>
    <text x="1075" y="325" text-anchor="middle" fill="white" font-weight="bold">ERROR</text>
</svg>
-->

Design Patterns Reference

Complete design system guidelines for creating visually stunning HTML documentation.

Color System

Primary Palette

Gradient Background:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Use for: Body background, primary branding elements
Creates depth and visual interest

Accent Colors:

Primary Purple-Blue: #667eea
Secondary Purple: #764ba2
Use for: Headings, borders, key UI elements

Semantic Color Scales

Success / Confirmed / Positive

Base: #48bb78 (green)
Dark: #2f855a (darker green, for strokes)
Light: #e6f4ea (pale green, for backgrounds)
Use for: Completed tasks, success messages, positive metrics

Warning / Uncertain / Attention

Base: #f59e0b (amber)
Dark: #d97706 (darker amber, for strokes)
Light: #fffbeb (pale amber, for backgrounds)
Use for: In-progress items, warnings, items needing attention

Info / Primary / Standard

Base: #4299e1 (blue)
Dark: #2b6cb0 (darker blue, for strokes)
Light: #e6f2ff (pale blue, for backgrounds)
Use for: Standard information, primary actions, neutral states

Error / Critical / Negative

Base: #f56565 (red)
Dark: #c53030 (darker red, for strokes)
Light: #fff5f5 (pale red, for backgrounds)
Use for: Errors, critical issues, failed states

Process / Action / Secondary

Base: #ed8936 (orange)
Dark: #c05621 (darker orange, for strokes)
Light: #fff5e6 (pale orange, for backgrounds)
Use for: Processing states, secondary actions

Special / Highlight / Tertiary

Base: #9f7aea (purple)
Dark: #6b46c1 (darker purple, for strokes)
Light: #f3e6ff (pale purple, for backgrounds)
Use for: Special features, highlights, premium items

Neutral Palette

Text Colors:

Dark (Primary text): #2d3748 - Headings, important content
Medium (Secondary text): #718096 - Body text, labels
Light (Tertiary text): #a0aec0 - Captions, metadata

UI Elements:

Dark border: #cbd5e0
Light border: #e2e8f0
Dark background: #edf2f7
Light background: #f7fafc
White: #ffffff

Color Contrast Guidelines

WCAG AA Compliance:

Minimum contrast ratio: 4.5:1 for normal text
Large text (18pt+ or 14pt+ bold): 3:1 minimum
Safe combinations:
Dark text (#2d3748) on light backgrounds (#f7fafc, #ffffff)
White text on colored backgrounds (all semantic base colors pass)
Medium text (#718096) on white only

Typography

Font Families

Primary (Sans-serif):

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

Use for: All body text, headings, UI elements
Fallback chain ensures availability across platforms

Code (Monospace):

font-family: 'Courier New', monospace;

Use for: Code blocks, technical data, fixed-width content

Type Scale

Display / Hero:

Size: 2.5em (40px at 16px base)
Weight: Bold (700)
Use for: Page title (h1)
Special effect: Gradient text clip

Section Heading:

Size: 1.8em (28.8px)
Weight: Bold (700)
Color: #2d3748
Use for: Major sections (h2)
Decoration: Bottom border 3px solid #667eea

Subsection:

Size: 1.4em (22.4px)
Weight: Bold (700)
Color: #2d3748
Use for: Subsections (h3)

Body:

Size: 1em (16px base)
Weight: Normal (400)
Line height: 1.6
Color: #2d3748 or #4a5568
Use for: Paragraphs, general content

Label / Caption:

Size: 0.9-0.95em (14.4-15.2px)
Weight: Normal (400) or Medium (500)
Color: #718096
Use for: Metric labels, chart labels, form labels

Small / Meta:

Size: 0.85em (13.6px)
Weight: Normal (400)
Color: #a0aec0
Use for: Footnotes, timestamps, metadata

SVG Text:

Small labels: 11-12px
Standard text: 13-14px
Emphasis: 15-16px
Large values: 18-24px
Metric displays: 48px+

Text Effects

Gradient Text (for h1):

h1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Code Highlighting:

.highlight {
    color: #fbbf24;  /* Amber highlight */
    font-weight: bold;
}

Spacing & Layout

Container Sizing

Max Width:

Container: 1400px
Comfortable reading: 800-1000px
Full width sections: No max-width

Padding:

Desktop container: 40px
Mobile container: 20px
Diagram containers: 30px
Content boxes: 20px
Metric cards: 25px

Margins:

Section bottom: 60px
Element groups: 30px
Individual elements: 20px
Small gaps: 10px

Grid Systems

Metric Grid:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;

Automatically responsive
Minimum card width: 200px
Equal width distribution

Custom Grids:

2-column: grid-template-columns: 1fr 1fr;
3-column: grid-template-columns: repeat(3, 1fr);
Sidebar layout: grid-template-columns: 300px 1fr;

Flexbox Patterns

Horizontal Center:

display: flex;
justify-content: center;
align-items: center;

Space Between:

display: flex;
justify-content: space-between;
align-items: center;

Wrapped Row:

display: flex;
flex-wrap: wrap;
gap: 20px;

Visual Effects

Shadows

Card Shadow:

box-shadow: 0 20px 60px rgba(0,0,0,0.3);

Use for: Main container, elevated cards

Metric Card Shadow:

box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);

Use for: Metric cards, smaller elevation

Subtle Shadow:

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

Use for: Buttons, small cards, hover states

Border Radius

Large (Containers):

Container: 20px
Diagram containers: 15px

Medium (Cards & Boxes):

Metric cards: 15px
Content boxes: 10px
SVG shapes: 10px

Small (UI Elements):

Buttons: 8px
Small badges: 5px

Pills / Rounded:

Full rounded: 50% (circles) or 9999px (pills)
Timeline progress bars: 20px

Opacity

Overlays:

Light overlay: 0.3
Medium overlay: 0.5-0.6
Strong overlay: 0.8-0.9

Hover States:

Slight fade: 0.9
Clear fade: 0.7-0.8

Disabled:

0.5-0.6

Responsive Breakpoints

Mobile First Strategy

Breakpoints:

/* Mobile: default styles, no media query needed */

/* Tablet */
@media (min-width: 768px) { ... }

/* Desktop */
@media (min-width: 1024px) { ... }

/* Large Desktop */
@media (min-width: 1440px) { ... }

Common Pattern (Desktop First):

@media (max-width: 768px) {
    .container { padding: 20px; }
    h1 { font-size: 1.8em; }
    .section-title { font-size: 1.4em; }
    .metric-grid { grid-template-columns: 1fr; }
}

Responsive Typography

Desktop:

h1: 2.5em
h2: 1.8em
h3: 1.4em
body: 1em

Mobile (max-width: 768px):

h1: 1.8em
h2: 1.4em
h3: 1.2em
body: 0.95em

SVG Text Scaling:

Use viewBox for automatic scaling
Font sizes in px remain constant
Increase viewBox dimensions rather than reducing font sizes

Component Patterns

Metric Cards

Standard Pattern:

<div class="metric-card">
    <div class="metric-value">[LARGE NUMBER]</div>
    <div class="metric-label">[DESCRIPTION]</div>
</div>

With Custom Color:

<div class="metric-card" style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);">
    <div class="metric-value">✓ [NUMBER]</div>
    <div class="metric-label">[DESCRIPTION]</div>
</div>

Code Blocks

Standard:

<div class="code-block">
<span class="highlight">Key term:</span> Regular code text
    Indented content
</div>

CSS:

.code-block {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 10px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    overflow-x: auto;
    line-height: 1.6;
}

Example Boxes

Pattern:

<div class="example-box">
    <div class="example-title">[TITLE]</div>
    <p>[CONTENT]</p>
</div>

CSS:

.example-box {
    background: #fff;
    border: 2px solid #667eea;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

Legends

Pattern:

<div class="legend">
    <div class="legend-item">
        <div class="legend-box" style="background: #4299e1;"></div>
        <span>[DESCRIPTION]</span>
    </div>
    <!-- More items -->
</div>

CSS:

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: #edf2f7;
    border-radius: 10px;
}

SVG Styling

Default SVG Styles

Container:

svg {
    width: 100%;
    height: auto;
}

Text:

svg text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Common Stroke/Fill Combinations

Primary Box:

Fill: #4299e1
Stroke: #2b6cb0
Stroke-width: 3

Success Box:

Fill: #48bb78
Stroke: #2f855a
Stroke-width: 3

Warning Box:

Fill: #f59e0b
Stroke: #d97706
Stroke-width: 3

Neutral/Pending:

Fill: #cbd5e0
Stroke: #a0aec0
Stroke-width: 2-3

ViewBox Guidelines

Common Aspect Ratios:

Wide: viewBox="0 0 1200 400" (3:1)
Standard: viewBox="0 0 1200 600" (2:1)
Balanced: viewBox="0 0 1200 800" (3:2)
Square: viewBox="0 0 600 600" (1:1)
Portrait: viewBox="0 0 800 1000" (4:5)

Coordinate System:

Origin: Top-left (0, 0)
X increases rightward
Y increases downward
Units are relative to viewBox

Accessibility

Color Blindness

Safe Patterns:

Don't rely on color alone (use icons, labels, patterns)
Use both fill and stroke for differentiation
Ensure shapes differ (circle vs square vs diamond)
Add text labels to all visual elements

Color Combinations to Avoid:

Red/green alone (common color blindness)
Blue/purple alone (hard to distinguish)
Low contrast combinations

Screen Readers

HTML Structure:

Use semantic tags: <section>, <article>, <header>, <footer>
Proper heading hierarchy: h1 → h2 → h3
Descriptive text around SVG diagrams

ARIA (if needed):

<svg aria-labelledby="chart-title" role="img">
    <title id="chart-title">Process Flow Diagram</title>
    <!-- SVG content -->
</svg>

Keyboard Navigation

Ensure all interactive elements are focusable
Visible focus indicators
Logical tab order

Animation (Optional)

Subtle Transitions

Hover Effects:

.metric-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

Fade In:

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.section {
    animation: fadeIn 0.5s ease-in;
}

Note: Keep animations subtle and optional - avoid distracting from content.

SVG Component Library

Comprehensive reference for SVG shapes, patterns, and techniques for creating stunning diagrams.

SVG Fundamentals

Basic Structure

<svg viewBox="0 0 1200 800" style="width: 100%; height: auto;">
    <defs>
        <!-- Reusable definitions (markers, gradients, patterns) -->
    </defs>

    <g id="group-name">
        <!-- Grouped elements -->
    </g>

    <!-- Direct elements -->
</svg>

ViewBox Explained

Format: viewBox="min-x min-y width height" Example: viewBox="0 0 1200 800"

min-x, min-y: Usually 0 0 (top-left origin)
width, height: Virtual coordinate system dimensions
SVG scales to fit container while maintaining aspect ratio
Larger viewBox = more space for content

Common Sizes:

<!-- Wide flowchart -->
<svg viewBox="0 0 1200 400">

<!-- Standard diagram -->
<svg viewBox="0 0 1200 600">

<!-- Detailed flowchart -->
<svg viewBox="0 0 1200 800">

<!-- Square chart -->
<svg viewBox="0 0 600 600">

<!-- Vertical timeline -->
<svg viewBox="0 0 800 1000">

Coordinate System

X-axis: Left (0) to right (positive)
Y-axis: Top (0) to bottom (positive)
Center of 1200×800 viewBox: (600, 400)
Units: Relative to viewBox (not pixels)

Basic Shapes

Rectangle

Standard Rectangle:

<rect x="100" y="100" width="200" height="100"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Rounded Rectangle:

<rect x="100" y="100" width="200" height="100" rx="10"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

rx: Horizontal corner radius
ry: Vertical corner radius (defaults to rx if omitted)

Process Box with Text:

<rect x="50" y="50" width="200" height="100" rx="10"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>
<text x="150" y="95" text-anchor="middle" fill="white"
      font-size="16" font-weight="bold">
    Process Name
</text>
<text x="150" y="115" text-anchor="middle" fill="white" font-size="12">
    Subtitle
</text>

Position Calculation:

Text X: rect.x + (rect.width / 2) for center
Text Y: rect.y + (rect.height / 2) for vertical center (approximately)
Baseline adjustment: Add 5-10px to Y for visual centering

Circle

Basic Circle:

<circle cx="300" cy="200" r="50"
        fill="#48bb78" stroke="#2f855a" stroke-width="3"/>

cx, cy: Center coordinates
r: Radius

Circle with Text (Start/End Node):

<circle cx="300" cy="200" r="50"
        fill="#48bb78" stroke="#2f855a" stroke-width="3"/>
<text x="300" y="205" text-anchor="middle" fill="white"
      font-size="16" font-weight="bold">
    START
</text>

Small Marker Circle:

<circle cx="300" cy="200" r="15"
        fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Ellipse

<ellipse cx="400" cy="200" rx="120" ry="60"
         fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>

rx: Horizontal radius
ry: Vertical radius

Path Shapes

Diamond (Decision Node)

Diamond Formula:

Top:    (center-x, top-y)
Right:  (right-x, center-y)
Bottom: (center-x, bottom-y)
Left:   (left-x, center-y)

Example (100px wide, 100px tall, centered at 600, 150):

<path d="M 600 100 L 650 150 L 600 200 L 550 150 Z"
      fill="#fbbf24" stroke="#d97706" stroke-width="3"/>
<text x="600" y="155" text-anchor="middle" font-size="14" font-weight="bold">
    Decision?
</text>

Larger Diamond (200×100):

<path d="M 600 130 L 700 130 L 750 180 L 700 230 L 500 230 L 450 180 Z"
      fill="#fbbf24" stroke="#d97706" stroke-width="3"/>

Hexagon (Preparation)

Horizontal Hexagon:

<path d="M 900 75 L 1050 75 L 1100 100 L 1050 125 L 900 125 L 850 100 Z"
      fill="#9f7aea" stroke="#6b46c1" stroke-width="3"/>

Pattern:

M [left-mid-x] [top-y]          (start left of top edge)
L [right-mid-x] [top-y]         (top edge)
L [right-x] [center-y]          (top-right slope)
L [right-mid-x] [bottom-y]      (bottom edge)
L [left-mid-x] [bottom-y]       (bottom edge)
L [left-x] [center-y]           (top-left slope)
Z                                (close path)

Parallelogram

<path d="M 100 100 L 280 100 L 250 150 L 70 150 Z"
      fill="#ed8936" stroke="#c05621" stroke-width="3"/>

Custom Polygons

Triangle:

<path d="M 500 100 L 600 200 L 400 200 Z"
      fill="#f56565" stroke="#c53030" stroke-width="3"/>

Pentagon:

<path d="M 500 100 L 580 150 L 550 230 L 450 230 L 420 150 Z"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="3"/>

Lines & Arrows

Straight Lines

Horizontal:

<line x1="100" y1="200" x2="300" y2="200"
      stroke="#2d3748" stroke-width="3"/>

Vertical:

<line x1="200" y1="100" x2="200" y2="300"
      stroke="#2d3748" stroke-width="3"/>

Diagonal:

<line x1="100" y1="100" x2="300" y2="300"
      stroke="#2d3748" stroke-width="3"/>

Dashed Line:

<line x1="100" y1="200" x2="300" y2="200"
      stroke="#cbd5e0" stroke-width="2" stroke-dasharray="5,5"/>

stroke-dasharray="dash,gap": Pattern of dashes and gaps
Common patterns: "5,5" (small), "10,5" (medium), "20,10" (large)

Path-based Lines

Straight line with path:

<path d="M 100 200 L 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

fill="none": Prevents filling (required for non-closed paths used as lines)

L-shaped connector:

<path d="M 250 100 L 400 100 L 400 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Multi-segment:

<path d="M 100 100 L 200 100 L 200 200 L 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Arrow Markers

Standard Arrowhead Definition:

<defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#2d3748"/>
    </marker>
</defs>

markerWidth/Height: Size of marker viewport
refX/refY: Anchor point (where arrow attaches to line)
orient="auto": Rotates to match line angle

Colored Arrows:

<defs>
    <marker id="arrowhead-success" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#48bb78"/>
    </marker>

    <marker id="arrowhead-error" markerWidth="10" markerHeight="10"
            refX="9" refY="3" orient="auto">
        <polygon points="0 0, 10 3, 0 6" fill="#f56565"/>
    </marker>
</defs>

Using Arrows:

<!-- Arrow at end -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-end="url(#arrowhead)"/>

<!-- Arrow at start -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-start="url(#arrowhead)"/>

<!-- Arrows at both ends -->
<path d="M 100 200 L 300 200" stroke="#2d3748" stroke-width="3"
      fill="none" marker-start="url(#arrowhead)" marker-end="url(#arrowhead)"/>

Curved Lines (Bezier Curves)

Quadratic Bezier (Q):

<path d="M 100 200 Q 200 100 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Format: Q control-x control-y end-x end-y
One control point

Cubic Bezier (C):

<path d="M 100 200 C 150 100, 250 100, 300 200"
      stroke="#2d3748" stroke-width="3" fill="none"/>

Format: C control1-x control1-y control2-x control2-y end-x end-y
Two control points (more control)

Smooth Curve Through Points:

<path d="M 100 200 Q 150 150 200 200 T 300 200"
      stroke="#4299e1" stroke-width="3" fill="none"/>

T: Smooth continuation of quadratic curve

Text Elements

Basic Text

<text x="100" y="100" font-size="16" fill="#2d3748">
    Simple Text
</text>

Text Anchoring

Horizontal Alignment:

<!-- Left-aligned (default) -->
<text x="100" y="100" text-anchor="start">Left</text>

<!-- Center-aligned -->
<text x="100" y="100" text-anchor="middle">Center</text>

<!-- Right-aligned -->
<text x="100" y="100" text-anchor="end">Right</text>

Vertical Alignment:

<!-- Baseline (default) -->
<text x="100" y="100" dominant-baseline="auto">Baseline</text>

<!-- Middle -->
<text x="100" y="100" dominant-baseline="middle">Middle</text>

<!-- Hanging (top) -->
<text x="100" y="100" dominant-baseline="hanging">Top</text>

Note: For reliable vertical centering, calculate Y position manually rather than relying on dominant-baseline (browser support varies).

Text Styling

<text x="100" y="100"
      font-size="18"
      font-weight="bold"
      font-style="italic"
      fill="#2d3748"
      opacity="0.8">
    Styled Text
</text>

Font Families in SVG:

<text x="100" y="100" font-family="'Segoe UI', sans-serif">
    Custom Font
</text>

Multi-line Text

Using Multiple <text> Elements:

<text x="150" y="90" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Line 1
</text>
<text x="150" y="110" text-anchor="middle" fill="white" font-size="12">
    Line 2
</text>
<text x="150" y="125" text-anchor="middle" fill="white" font-size="11">
    Line 3
</text>

Line Spacing: Typically 15-25px between lines depending on font size

Text on Path

<defs>
    <path id="curve" d="M 100 200 Q 300 100 500 200" fill="none"/>
</defs>

<text font-size="16" fill="#2d3748">
    <textPath href="#curve">
        Text following the curve
    </textPath>
</text>

Gradients

Linear Gradient

<defs>
    <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#4299e1;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#2b6cb0;stop-opacity:1" />
    </linearGradient>
</defs>

<rect x="100" y="100" width="200" height="100" fill="url(#blueGradient)"/>

Gradient Directions:

Horizontal: x1="0%" y1="0%" x2="100%" y2="0%"
Vertical: x1="0%" y1="0%" x2="0%" y2="100%"
Diagonal: x1="0%" y1="0%" x2="100%" y2="100%"

Radial Gradient

<defs>
    <radialGradient id="radialGlow">
        <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.5" />
    </radialGradient>
</defs>

<circle cx="300" cy="200" r="80" fill="url(#radialGlow)"/>

Multi-stop Gradients

<linearGradient id="multiColor" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:#48bb78" />
    <stop offset="50%" style="stop-color:#f59e0b" />
    <stop offset="100%" style="stop-color:#f56565" />
</linearGradient>

Grouping & Reuse

Groups (<g>)

<g id="icon-group" transform="translate(100, 100)">
    <circle r="30" fill="#4299e1"/>
    <text y="5" text-anchor="middle" fill="white" font-weight="bold">✓</text>
</g>

Benefits:

Apply transformations to multiple elements
Organize related elements
Apply styles to all children

Use Element

Define once:

<defs>
    <g id="status-icon">
        <circle r="15" fill="#48bb78" stroke="#2f855a" stroke-width="2"/>
        <text text-anchor="middle" fill="white" font-size="12" font-weight="bold">✓</text>
    </g>
</defs>

Reuse multiple times:

<use href="#status-icon" x="100" y="100"/>
<use href="#status-icon" x="300" y="100"/>
<use href="#status-icon" x="500" y="100"/>

Symbol Element

<defs>
    <symbol id="check-icon" viewBox="0 0 30 30">
        <circle cx="15" cy="15" r="15" fill="#48bb78"/>
        <path d="M 8 15 L 13 20 L 22 10" stroke="white" stroke-width="3"
              fill="none" stroke-linecap="round"/>
    </symbol>
</defs>

<use href="#check-icon" x="100" y="100" width="30" height="30"/>
<use href="#check-icon" x="200" y="100" width="50" height="50"/>

Symbol vs Group:

Symbol has its own viewBox (scalable)
Symbol not rendered unless used
Better for reusable icons

Transformations

Translate (Move)

<rect x="0" y="0" width="100" height="50" fill="#4299e1"
      transform="translate(200, 100)"/>

Moves shape to new position
Original x, y still apply (total position = original + translate)

Rotate

<rect x="100" y="100" width="100" height="50" fill="#4299e1"
      transform="rotate(45 150 125)"/>

Format: rotate(angle center-x center-y)
Angle in degrees
Rotates around specified center point

Scale

<circle cx="200" cy="200" r="30" fill="#48bb78"
        transform="scale(1.5)"/>

scale(factor): Uniform scaling
scale(x-factor, y-factor): Non-uniform scaling

Combined Transformations

<rect x="0" y="0" width="100" height="50" fill="#4299e1"
      transform="translate(200, 100) rotate(15) scale(1.2)"/>

Applied right to left: scale → rotate → translate

Advanced Patterns

Rounded Progress Bar

<!-- Background -->
<rect x="150" y="80" width="800" height="40" rx="20" fill="#e2e8f0"/>

<!-- Progress (60%) -->
<rect x="150" y="80" width="480" height="40" rx="20" fill="#48bb78"/>

Donut Chart (Simplified)

<circle cx="300" cy="300" r="150" fill="none"
        stroke="#4299e1" stroke-width="80"/>

Multi-segment Donut:

<!-- Segment 1 (50% of circle = 471 units out of 942 total circumference) -->
<circle cx="300" cy="300" r="150" fill="none"
        stroke="#4299e1" stroke-width="80"
        stroke-dasharray="471 471"
        transform="rotate(-90 300 300)"/>

<!-- Segment 2 (30%) -->
<circle cx="300" cy="300" r="150" fill="none"
        stroke="#48bb78" stroke-width="80"
        stroke-dasharray="283 659"
        stroke-dashoffset="-471"
        transform="rotate(-90 300 300)"/>

Circumference Formula: 2 × π × radius = 2 × 3.14159 × 150 ≈ 942

Drop Shadow Filter

<defs>
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</defs>

<rect x="100" y="100" width="200" height="100" rx="10"
      fill="#4299e1" filter="url(#drop-shadow)"/>

Clipping Path

<defs>
    <clipPath id="rounded-clip">
        <rect x="100" y="100" width="200" height="150" rx="15"/>
    </clipPath>
</defs>

<image x="100" y="100" width="200" height="150"
       href="image.jpg" clip-path="url(#rounded-clip)"/>

Chart Components

Bar Chart Bar

<rect x="200" y="150" width="150" height="200" rx="5"
      fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="275" y="260" text-anchor="middle" fill="white"
      font-size="24" font-weight="bold">
    456
</text>

Axis Lines

<!-- X-axis -->
<line x1="100" y1="350" x2="1100" y2="350"
      stroke="#2d3748" stroke-width="2"/>

<!-- Y-axis -->
<line x1="100" y1="350" x2="100" y2="80"
      stroke="#2d3748" stroke-width="2"/>

<!-- Grid lines -->
<line x1="100" y1="280" x2="1100" y2="280"
      stroke="#e2e8f0" stroke-width="1" opacity="0.5"/>

Data Point Marker

<circle cx="300" cy="200" r="6" fill="#4299e1"
        stroke="white" stroke-width="2"/>

Best Practices

Coordinate Calculation

Center Text in Rectangle:

textX = rectX + (rectWidth / 2)
textY = rectY + (rectHeight / 2) + (fontSize * 0.35)

Position Diamond Points:

centerX = 600, centerY = 180
halfWidth = 100, halfHeight = 50

top:    (centerX, centerY - halfHeight)
right:  (centerX + halfWidth, centerY)
bottom: (centerX, centerY + halfHeight)
left:   (centerX - halfWidth, centerY)

Performance Tips

Limit total SVG elements per diagram to ~500-1000
Use <use> for repeated elements
Avoid overly complex paths
Minimize filter usage (shadows, blurs)
Group related elements

Readability Guidelines

Minimum stroke-width: 2px for visibility
Minimum font-size: 11px for labels, 14px for emphasis
Minimum touch target: 30×30px for interactive elements
White space: 20-30px between major elements
Contrast: Stroke should be darker than fill

Debugging SVG

Visible Boundaries:

<!-- Temporary: shows viewBox boundary -->
<rect x="0" y="0" width="1200" height="800"
      fill="none" stroke="red" stroke-width="1"/>

Grid Overlay:

<!-- Shows 100px grid -->
<line x1="0" y1="100" x2="1200" y2="100" stroke="pink" stroke-width="1"/>
<line x1="0" y1="200" x2="1200" y2="200" stroke="pink" stroke-width="1"/>
<!-- ... repeat for debugging ... -->

Icon Library

Checkmark

<path d="M 8 15 L 13 20 L 22 10"
      stroke="#48bb78" stroke-width="3" fill="none"
      stroke-linecap="round" stroke-linejoin="round"/>

X (Close)

<path d="M 10 10 L 20 20 M 20 10 L 10 20"
      stroke="#f56565" stroke-width="3"
      stroke-linecap="round"/>

Warning Triangle

<path d="M 15 5 L 25 23 L 5 23 Z"
      fill="#f59e0b" stroke="#d97706" stroke-width="2"/>
<text x="15" y="20" text-anchor="middle" fill="white"
      font-weight="bold" font-size="14">!</text>

Info Circle

<circle cx="15" cy="15" r="12" fill="#4299e1" stroke="#2b6cb0" stroke-width="2"/>
<text x="15" y="20" text-anchor="middle" fill="white"
      font-weight="bold" font-size="16">i</text>

Related skills

Grill MeHave an agent relentlessly pressure-test their plan or design until every decision branch is resolved and shared understanding is reached.691k196k

Grill With DocsPressure-test architecture decisions against their live codebase and living documentation before writing production code.585k196k

Lark CalendarLet their coding agents read, create, and manage events inside Lark (Feishu) Calendar directly from natural language instructions.493k

Lark ImLet their coding agent send instant notifications, post updates, and receive commands directly inside Lark (Feishu) workspaces.493k

Lark ContactLet their AI coding agents read and write contacts, send messages, and manage user data inside Lark (Feishu).493k

Lark AttendanceAutomatically fetch and report daily attendance data from Lark (Feishu) into their own tools or agents.493k

How it compares

Pick flowchart-creator over architecture-diagram skills when the deliverable is a process or decision flow rather than system component topology.

FAQ

What file does flowchart-creator produce?

flowchart-creator writes a standalone HTML file named `[process]-flowchart.html` containing an SVG flowchart with start/end nodes, process boxes, decision diamonds, arrows, and optional swimlanes.

Which node types does flowchart-creator support?

flowchart-creator supports green/red start/end rounded rectangles, blue process rectangles, orange decision diamonds, labeled arrow connectors, and optional swimlane groupings in SVG.

Productivity & Planningworkflowpm