@haposoft/cafekit 0.7.23 → 0.7.24

package/src/claude/skills/generate-graph/scripts/test-all-styles.sh

@@ -0,0 +1,135 @@
+#!/bin/bash
+# Batch Test Script
+# Renders regression fixtures, validates SVGs, and exports PNGs
+
+set -euo pipefail
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m'
+
+SKILL_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+TEST_DIR="${SKILL_DIR}/test-output"
+TIMESTAMP=$(date +%Y%m%d_%H%M%S)
+
+echo -e "${BLUE}=== Fireworks Tech Graph - Batch Test ===${NC}"
+echo "Test directory: $TEST_DIR"
+echo "Timestamp: $TIMESTAMP"
+echo ""
+
+# Create test directory
+mkdir -p "$TEST_DIR"
+
+# Test configuration
+STYLES=(1 2 3 4 5 6 7)
+STYLE_NAMES=("Flat Icon" "Dark Terminal" "Blueprint" "Notion Clean" "Glassmorphism" "Claude Official" "OpenAI Official")
+
+# Summary counters
+TOTAL=0
+PASSED=0
+FAILED=0
+
+FIXTURES_DIR="${SKILL_DIR}/fixtures"
+
+echo -e "${BLUE}Testing all styles...${NC}"
+echo "----------------------------------------"
+
+for i in "${!STYLES[@]}"; do
+    STYLE="${STYLES[$i]}"
+    STYLE_NAME="${STYLE_NAMES[$i]}"
+    
+    echo -e "\n${YELLOW}Style $STYLE: $STYLE_NAME${NC}"
+    
+    # Check if style reference exists
+    STYLE_FILE=$(find "${SKILL_DIR}/references" -maxdepth 1 -type f -name "style-${STYLE}-*.md" | head -n 1)
+    if [ -z "${STYLE_FILE:-}" ] || [ ! -f "$STYLE_FILE" ]; then
+        echo -e "${RED}✗ Style file not found: $STYLE_FILE${NC}"
+        FAILED=$((FAILED + 1))
+        TOTAL=$((TOTAL + 1))
+        continue
+    fi
+    
+    echo -e "${GREEN}✓ Style file found${NC}"
+    
+    if [ ! -d "$FIXTURES_DIR" ]; then
+        echo -e "${YELLOW}⚠ Fixtures directory not found: $FIXTURES_DIR${NC}"
+        continue
+    fi
+
+    FIXTURE_FILES=$(find "$FIXTURES_DIR" -maxdepth 1 -type f -name "*.json" | sort || true)
+    MATCHED_FIXTURES=()
+    for FIXTURE in $FIXTURE_FILES; do
+        FIXTURE_STYLE=$(python3 - "$FIXTURE" <<'PY'
+import json
+import sys
+from pathlib import Path
+data = json.loads(Path(sys.argv[1]).read_text(encoding='utf-8'))
+print(data.get("style", ""))
+PY
+)
+        if [ "$FIXTURE_STYLE" = "$STYLE" ]; then
+            MATCHED_FIXTURES+=("$FIXTURE")
+        fi
+    done
+
+    if [ "${#MATCHED_FIXTURES[@]}" -eq 0 ]; then
+        echo -e "${YELLOW}⚠ No regression fixtures found for style $STYLE${NC}"
+        continue
+    fi
+
+    # Render, validate, and export each fixture
+    for FIXTURE in "${MATCHED_FIXTURES[@]}"; do
+        BASENAME=$(basename "$FIXTURE" .json)
+        SVG_FILE="${TEST_DIR}/${BASENAME}_${TIMESTAMP}.svg"
+        PNG_FILE="${TEST_DIR}/${BASENAME}_${TIMESTAMP}.png"
+        TEMPLATE_TYPE=$(python3 - "$FIXTURE" <<'PY'
+import json
+import sys
+from pathlib import Path
+data = json.loads(Path(sys.argv[1]).read_text(encoding='utf-8'))
+print(data.get("template_type", "architecture"))
+PY
+)
+
+        echo -n "  Rendering $BASENAME... "
+        TOTAL=$((TOTAL + 1))
+
+        if python3 "${SKILL_DIR}/scripts/generate-from-template.py" "$TEMPLATE_TYPE" "$SVG_FILE" "$(cat "$FIXTURE")" > /dev/null 2>&1 \
+            && "${SKILL_DIR}/scripts/validate-svg.sh" "$SVG_FILE" > /dev/null 2>&1; then
+            if command -v rsvg-convert &> /dev/null \
+                && rsvg-convert -w 1920 "$SVG_FILE" -o "$PNG_FILE" 2>/dev/null; then
+                PNG_SIZE=$(du -h "$PNG_FILE" | cut -f1)
+                echo -e "${GREEN}✓ Pass${NC} (${PNG_SIZE})"
+            else
+                echo -e "${GREEN}✓ Pass${NC}"
+            fi
+            PASSED=$((PASSED + 1))
+        else
+            echo -e "${RED}✗ Fail${NC}"
+            FAILED=$((FAILED + 1))
+            if [ -f "$SVG_FILE" ]; then
+                "${SKILL_DIR}/scripts/validate-svg.sh" "$SVG_FILE" 2>&1 | grep -E "✗|Error" | sed 's/^/    /' || true
+            fi
+        fi
+    done
+done
+
+# Print summary
+echo ""
+echo "========================================"
+echo -e "${BLUE}Test Summary${NC}"
+echo "----------------------------------------"
+echo "Total tests: $TOTAL"
+echo -e "${GREEN}Passed: $PASSED${NC}"
+echo -e "${RED}Failed: $FAILED${NC}"
+
+if [ "$FAILED" -eq 0 ]; then
+    echo -e "\n${GREEN}✓ All tests passed!${NC}"
+    exit 0
+else
+    echo -e "\n${RED}✗ Some tests failed${NC}"
+    exit 1
+fi

package/src/claude/skills/generate-graph/scripts/validate-svg.sh

@@ -0,0 +1,292 @@
+#!/bin/bash
+# SVG Validation Script
+# Checks SVG syntax and reports detailed errors
+
+set -euo pipefail
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+if [ $# -eq 0 ]; then
+    echo "Usage: $0 <svg-file>"
+    exit 1
+fi
+
+SVG_FILE="$1"
+
+if [ ! -f "$SVG_FILE" ]; then
+    echo -e "${RED}Error: File not found: $SVG_FILE${NC}"
+    exit 1
+fi
+
+echo "Validating SVG: $SVG_FILE"
+echo "----------------------------------------"
+
+FAILURES=0
+
+# Check 0: XML syntax
+echo -n "Checking XML syntax... "
+if command -v xmllint &> /dev/null; then
+    if xmllint --noout "$SVG_FILE" 2>/dev/null; then
+        echo -e "${GREEN}✓ Pass${NC}"
+    else
+        echo -e "${RED}✗ Fail${NC}"
+        xmllint --noout "$SVG_FILE" 2>&1 || true
+        FAILURES=$((FAILURES + 1))
+    fi
+else
+    echo -e "${YELLOW}⚠ Skipped${NC} (xmllint not found)"
+fi
+
+# Check 1: Tag balance
+echo -n "Checking tag balance... "
+OPEN_TAGS=$( { grep -o '<[A-Za-z][A-Za-z0-9:-]*' "$SVG_FILE" || true; } | { grep -v '</' || true; } | wc -l | tr -d ' ' )
+SELF_CLOSING=$( { grep -o '/>' "$SVG_FILE" || true; } | wc -l | tr -d ' ' )
+CLOSE_TAGS=$( { grep -o '</[A-Za-z][A-Za-z0-9:-]*>' "$SVG_FILE" || true; } | wc -l | tr -d ' ' )
+TOTAL_CLOSE=$((SELF_CLOSING + CLOSE_TAGS))
+
+if [ "$OPEN_TAGS" -eq "$TOTAL_CLOSE" ]; then
+    echo -e "${GREEN}✓ Pass${NC} (${OPEN_TAGS} tags)"
+else
+    echo -e "${RED}✗ Fail${NC} (${OPEN_TAGS} open, ${TOTAL_CLOSE} close)"
+    FAILURES=$((FAILURES + 1))
+fi
+
+# Check 2: Quote check
+echo -n "Checking attribute quotes... "
+UNQUOTED=$( { grep -oE '[a-z-]+=[^"'\''> ]' "$SVG_FILE" || true; } | wc -l | tr -d ' ' )
+if [ "$UNQUOTED" -eq 0 ]; then
+    echo -e "${GREEN}✓ Pass${NC}"
+else
+    echo -e "${RED}✗ Fail${NC} (${UNQUOTED} unquoted attributes)"
+    grep -n -oE '[a-z-]+=[^"'\''> ]' "$SVG_FILE" | head -5 || true
+    FAILURES=$((FAILURES + 1))
+fi
+
+# Check 3: Unescaped entities in text
+echo -n "Checking text entities... "
+SPECIAL=$(python3 - "$SVG_FILE" <<'PY'
+from pathlib import Path
+import re
+import sys
+
+text = Path(sys.argv[1]).read_text(encoding='utf-8')
+issues = 0
+for chunk in re.findall(r'>([^<]*)<', text, flags=re.S):
+    cleaned = re.sub(r'&(amp|lt|gt|quot|apos);', '', chunk)
+    if '&' in cleaned:
+        issues += 1
+print(issues)
+PY
+)
+if [ "$SPECIAL" -eq 0 ]; then
+    echo -e "${GREEN}✓ Pass${NC}"
+else
+    echo -e "${YELLOW}⚠ Warning${NC} (${SPECIAL} potential unescaped entities)"
+fi
+
+# Check 4: Marker references
+echo -n "Checking marker references... "
+MARKER_REFS=$( { grep -oE 'marker-end="url\(#[^)]+\)"' "$SVG_FILE" || true; } | { grep -oE '#[^)]+' || true; } | tr -d '#' | sort -u )
+MARKER_DEFS=$( { grep -oE '<marker id="[^"]+"' "$SVG_FILE" || true; } | { grep -oE 'id="[^"]+"' || true; } | tr -d 'id="' | sort -u )
+
+MISSING=0
+for ref in $MARKER_REFS; do
+    if ! echo "$MARKER_DEFS" | grep -q "^${ref}$"; then
+        echo -e "${RED}✗ Missing marker: $ref${NC}"
+        MISSING=$((MISSING + 1))
+    fi
+done
+
+if [ "$MISSING" -eq 0 ]; then
+    echo -e "${GREEN}✓ Pass${NC}"
+else
+    echo -e "${RED}✗ Fail${NC} (${MISSING} missing markers)"
+    FAILURES=$((FAILURES + 1))
+fi
+
+# Check 5: Arrow-component collision
+echo -n "Checking arrow collisions... "
+COLLISIONS=$(python3 - "$SVG_FILE" <<'PY'
+from pathlib import Path
+import re
+import sys
+import xml.etree.ElementTree as ET
+
+SVG_NS = {'svg': 'http://www.w3.org/2000/svg'}
+
+def strip(tag):
+    return tag.split('}', 1)[-1]
+
+def to_float(value, default=0.0):
+    try:
+        return float(value)
+    except (TypeError, ValueError):
+        return default
+
+def is_container_rect(el):
+    if el.get('stroke-dasharray'):
+        return True
+    width = to_float(el.get('width'))
+    height = to_float(el.get('height'))
+    if width > 700 or height > 500:
+        return True
+    if width < 70 or height < 30:
+        return True
+    return False
+
+def shape_bounds(el):
+    tag = strip(el.tag)
+    if tag == 'rect':
+        if is_container_rect(el):
+            return None
+        x = to_float(el.get('x'))
+        y = to_float(el.get('y'))
+        w = to_float(el.get('width'))
+        h = to_float(el.get('height'))
+        return (x, y, x + w, y + h)
+    if tag == 'circle':
+        r = to_float(el.get('r'))
+        if r < 20:
+            return None
+        cx = to_float(el.get('cx'))
+        cy = to_float(el.get('cy'))
+        return (cx - r, cy - r, cx + r, cy + r)
+    if tag == 'ellipse':
+        rx = to_float(el.get('rx'))
+        ry = to_float(el.get('ry'))
+        if rx < 20 or ry < 20:
+            return None
+        cx = to_float(el.get('cx'))
+        cy = to_float(el.get('cy'))
+        return (cx - rx, cy - ry, cx + rx, cy + ry)
+    return None
+
+def parse_path_points(d):
+    tokens = re.findall(r'[ML]|-?\d+(?:\.\d+)?', d or '')
+    if not tokens:
+        return []
+    points = []
+    command = None
+    index = 0
+    while index < len(tokens):
+        token = tokens[index]
+        if token in {'M', 'L'}:
+            command = token
+            index += 1
+            continue
+        if command not in {'M', 'L'} or index + 1 >= len(tokens):
+            return []
+        x = float(tokens[index])
+        y = float(tokens[index + 1])
+        points.append((x, y))
+        index += 2
+    return points
+
+def segment_hits_bounds(p1, p2, bounds):
+    x1, y1 = p1
+    x2, y2 = p2
+    left, top, right, bottom = bounds
+    eps = 1e-6
+
+    if abs(y1 - y2) < eps:
+        y = y1
+        if not (top + eps < y < bottom - eps):
+            return False
+        seg_left = min(x1, x2)
+        seg_right = max(x1, x2)
+        overlap_left = max(seg_left, left)
+        overlap_right = min(seg_right, right)
+        if overlap_right - overlap_left <= eps:
+            return False
+        if abs(overlap_left - x1) < eps or abs(overlap_right - x2) < eps:
+            return False
+        if abs(overlap_left - x2) < eps or abs(overlap_right - x1) < eps:
+            return False
+        return True
+
+    if abs(x1 - x2) < eps:
+        x = x1
+        if not (left + eps < x < right - eps):
+            return False
+        seg_top = min(y1, y2)
+        seg_bottom = max(y1, y2)
+        overlap_top = max(seg_top, top)
+        overlap_bottom = min(seg_bottom, bottom)
+        if overlap_bottom - overlap_top <= eps:
+            return False
+        if abs(overlap_top - y1) < eps or abs(overlap_bottom - y2) < eps:
+            return False
+        if abs(overlap_top - y2) < eps or abs(overlap_bottom - y1) < eps:
+            return False
+        return True
+
+    return False
+
+root = ET.fromstring(Path(sys.argv[1]).read_text(encoding='utf-8'))
+obstacles = [bounds for element in root.iter() if (bounds := shape_bounds(element)) is not None]
+
+collisions = 0
+for element in root.iter():
+    tag = strip(element.tag)
+    if tag == 'line' and element.get('marker-end'):
+        points = [
+            (to_float(element.get('x1')), to_float(element.get('y1'))),
+            (to_float(element.get('x2')), to_float(element.get('y2'))),
+        ]
+    elif tag == 'path' and element.get('marker-end'):
+        points = parse_path_points(element.get('d'))
+    else:
+        continue
+
+    for p1, p2 in zip(points, points[1:]):
+        if any(segment_hits_bounds(p1, p2, bounds) for bounds in obstacles):
+            collisions += 1
+            break
+
+print(collisions)
+PY
+)
+if [ "$COLLISIONS" -eq 0 ]; then
+    echo -e "${GREEN}✓ Pass${NC}"
+else
+    echo -e "${RED}✗ Fail${NC} (${COLLISIONS} arrow path collision(s))"
+    FAILURES=$((FAILURES + 1))
+fi
+
+# Check 6: Closing </svg> tag
+echo -n "Checking closing tag... "
+if grep -q '</svg>' "$SVG_FILE"; then
+    echo -e "${GREEN}✓ Pass${NC}"
+else
+    echo -e "${RED}✗ Fail${NC} (missing </svg>)"
+    FAILURES=$((FAILURES + 1))
+fi
+
+# Check 7: rsvg-convert validation
+echo -n "Running rsvg-convert validation... "
+if command -v rsvg-convert &> /dev/null; then
+    if rsvg-convert "$SVG_FILE" -o /tmp/test-output.png 2>/dev/null; then
+        echo -e "${GREEN}✓ Pass${NC}"
+        rm -f /tmp/test-output.png
+    else
+        echo -e "${RED}✗ Fail${NC}"
+        echo "rsvg-convert error:"
+        rsvg-convert "$SVG_FILE" -o /tmp/test-output.png 2>&1 || true
+        FAILURES=$((FAILURES + 1))
+    fi
+else
+    echo -e "${YELLOW}⚠ Skipped${NC} (rsvg-convert not found)"
+fi
+
+echo "----------------------------------------"
+if [ "$FAILURES" -eq 0 ]; then
+    echo "Validation complete"
+    exit 0
+fi
+
+echo -e "${RED}Validation failed (${FAILURES} error(s))${NC}"
+exit 1

package/src/claude/skills/generate-graph/templates/agent-architecture.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+    <marker id="arrowPurple" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#7c3aed"/>
+    </marker>
+    <marker id="arrowGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#059669"/>
+    </marker>
+    <marker id="arrowOrange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#ea580c"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .node-label { font-size: 16px; font-weight: 600; fill: #1e293b; }
+    .sub-label { font-size: 13px; font-weight: 400; fill: #64748b; }
+    .arrow-label { font-size: 12px; font-weight: 400; fill: #475569; }
+  </style>
+  <rect width="960" height="700" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- NODES -->
+  <!-- ARROWS -->
+  <!-- LEGEND -->
+</svg>

package/src/claude/skills/generate-graph/templates/architecture.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+    <marker id="arrowGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#059669"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .layer-label { font-size: 16px; font-weight: 600; fill: #475569; }
+    .node-label { font-size: 16px; font-weight: 600; fill: #1e293b; }
+    .sub-label { font-size: 13px; font-weight: 400; fill: #64748b; }
+    .arrow-label { font-size: 12px; font-weight: 400; fill: #475569; }
+  </style>
+  <rect width="960" height="700" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- NODES -->
+  <!-- ARROWS -->
+  <!-- LEGEND -->
+</svg>

package/src/claude/skills/generate-graph/templates/comparison-matrix.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+    .title { font-size: 24px; font-weifill: #1e293b; }
+    .header { font-size: 14px; font-weight: 600; fill: #1e293b; }
+    .row-label { font-size: 13px; font-weight: 500; fill: #475569; }
+    .cell-text { font-size: 13px; font-weight: 400; fill: #1e293b; }
+  </style>
+  <rect width="960" height="700" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- HEADERS -->
+  <!-- ROWS -->
+  <!-- CELLS -->
+</svg>

package/src/claude/skills/generate-graph/templates/data-flow.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+    <marker id="arrowPurple" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#7c3aed"/>
+    </marker>
+    <marker id="arrowGreen" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#059669"/>
+    </marker>
+    <marker id="arrowOrange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#ea580c"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .node-label { font-size: 16px; font-weight: 600; fill: #1e293b; }
+    .sub-label { font-size: 13px; font-weight: 400; fill: #64748b; }
+    .arrow-label { font-size: 12px; font-weight: 400; fill: #475569; }
+  </style>
+  <rect width="960" height="700" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- NODES -->
+  <!-- ARROWS -->
+  <!-- LEGEND -->
+</svg>

package/src/claude/skills/generate-graph/templates/er-diagram.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .entity-name { font-size: 15px; font-weight: 700; fill: #1e293b; }
+    .attribute { font-size: 12px; font-weight: 400; fill: #475569; }
+    .primary-key { font-size: 12px; font-weight: 600; fill: #1e293b; text-decoration: underline; }
+    .relationship { font-size: 12px; font-weight: 500; fill: #64748b; }
+    .cardinality { font-size: 11px; font-weight: 400; fill: #64748b; }
+  </style>
+  <rect width="960" height="700" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- ENTITIES -->
+  <!-- RELATIONSHIPS -->
+  <!-- CARDINALITY -->
+</svg>

package/src/claude/skills/generate-graph/templates/flowchart.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .node-label { font-size: 14px; font-weight: 500; fill: #1e293b; }
+    .decision-label { font-size: 13px; font-weight: 500; fill: #1e293b; }
+    .arrow-label { font-size: 11px; font-weight: 400; fill: #475569; }
+  </style>
+  <rect width="960" height="700" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- START -->
+  <!-- PROCESSES -->
+  <!-- DECISIONS -->
+  <!-- ARROWS -->
+  <!-- END -->
+</svg>

package/src/claude/skills/generate-graph/templates/sequence.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 800">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .participant { font-size: 14px; font-weight: 600; fill: #1e293b; }
+    .message { font-size: 12px; font-weight: 400; fill: #475569; }
+    .lifeline { stroke: #cbd5e1; stroke-width: 1.5; stroke-dasharray: 5,3; }
+  </style>
+  <rect width="960" height="800" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- PARTICIPANTS -->
+  <!-- LIFELINES -->
+  <!-- MESSAGES -->
+  <!-- ACTIVATIONS -->
+</svg>

package/src/claude/skills/generate-graph/templates/state-machine.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .state-name { font-size: 14px; font-weight: 600; fill: #1e293b; }
+    .state-activity { font-size: 11px; font-weight: 400; fill: #64748b; }
+    . { font-size: 11px; font-weight: 400; fill: #475569; }
+  </style>
+  <rect width="960" height="700" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- INITIAL_STATE -->
+  <!-- STATES -->
+  <!-- TRANSITIONS -->
+  <!-- FINAL_STATE -->
+</svg>

package/src/claude/skills/generate-graph/templates/timeline.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .period-label { font-size: 12px; font-weight: 500; fill: #475569; }
+    .task-label { font-size: 13px; font-weight: 500; fill: #1e293b; }
+    .milestone-label { font-size: 12px; font-weight: 600; fill: #1e293b; }
+  </style>
+  <rect width="1200" height="400" fill="#ffffff"/>
+  <text x="600" y="50" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- TIME_AXIS -->
+  <!-- TASKS -->
+  <!-- MILESTONES -->
+</svg>

package/src/claude/skills/generate-graph/templates/use-case.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 700">
+  <defs>
+    <marker id="arrowBlue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
+    </marker>
+  </defs>
+  <style>
+    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+    .title { font-size: 24px; font-weight: 700; fill: #1e293b; }
+    .actor-label { font-size: 13px; font-weight: 600; fill: #1e293b; }
+    .usecaseel { font-size: 13px; font-weight: 500; fill: #1e293b; }
+    .system-label { font-size: 16px; font-weight: 600; fill: #475569; }
+    .relationship { font-size: 11px; font-weight: 400; fill: #64748b; font-style: italic; }
+  </style>
+  <rect width="960" height="700" fill="#ffffff"/>
+  <text x="480" y="60" text-anchor="middle" class="title">{{TITLE}}</text>
+  <!-- SYSTEM_BOUNDARY -->
+  <!-- ACTORS -->
+  <!-- USECASES -->
+  <!-- RELATIONSHIPS -->
+</svg>