231 Create Mermaid Generator Skill E4f3aba1

# Create Mermaid Generator Skill

!!! prompt
    Use the skill-generator skill to create a new skill called `mermaid-generator`.  This will take an
    textual description of a workflow diagram and render it using the mermaid javascript library.  By 
    default it will use a top-down rendering and colorful backgrounds for each item.  All labels will 
    use a 16-point font.  Edges between items will also have a 16 label.  If the description of the 
    diagram is not complete, prompt the user for additional information.  All workflow diagrams must have
    a DIAGRAM_NAME in lower-case with only dashes.  Suggest a name if the user does not specify a name.

    Create the following files in the /docs/sims/{{DIAGRAM_NAME}} directory:

    1. index.md - with the <iframe> reference to it in the file
    2. main.html - the HTML file we reference in the <iframe src="main.html">
    3. script.js - javascript code
    4. style.css - CSS style sheet
    5. metadata.json - Dublin Core for search engine and reuse

⏺ I'll use the skill-creator skill to help you create a new mermaid-generator skill that generates
  workflow diagrams using the Mermaid JavaScript library.

> The "skill-creator" skill is running 

> The "skill-creator" skill is running 

⏺ I'll help you create the mermaid-generator skill. Let me start by understanding the skill
  requirements better with some clarifying questions.
                                                                                                   
⏺ User answered Claude's questions:
  ⎿  · What format should the mermaid-generator skill output? An HTML file with embedded Mermaid, 
     markdown with mermaid code blocks, or both? → Standalone HTML file
     · What types of Mermaid diagrams should this skill support? → Flowcharts
     · Where should the generated diagrams be saved in an intelligent textbook project? → /docs/sims
      and use a format similar to the other microsims that use an index.md, data.json, stylel.css, 
     main.html and script.js files in the /docs/sims/NAME
     · Should the skill include a reference guide for Mermaid syntax? → Yes, include reference

⏺ Perfect! Now I understand the requirements. The skill will:
  - Generate standalone HTML files in the MicroSim format
  - Focus on flowchart diagrams
  - Save to /docs/sims/NAME with the standard structure (index.md, metadata.json, style.css,
  main.html, script.js)
  - Include Mermaid syntax reference documentation

  Let me create this skill following the skill creation process.

⏺ Bash(python3 $HOME/.claude/skills/skill-creator/scripts/init_skill.py mermaid-generator --path
      $HOME/Documents/ws/claude-skills/skills)
  ⎿  🚀 Initializing skill: mermaid-generator                 
        Location: $HOME/Documents/ws/claude-skills/skills
     … +13 lines (ctrl+o to expand)

⏺ Read(skills/mermaid-generator/SKILL.md)
  ⎿  Read 86 lines

⏺ Bash(rm $HOME/Documents/ws/claude-skills/skills/mermaid-generator/scripts/example.py
      $HOME/Documents/ws/claude-skills/skills/mermaid-generator/references/a…)
  ⎿  (No content)

⏺ Fetch(`https://mermaid.js.org/syntax/flowchart.html`)
  ⎿  Received 188.5KB (200 OK)

⏺ Now I'll create the Mermaid syntax reference documentation:

⏺ Write(skills/mermaid-generator/references/mermaid-flowchart-syntax.md)
  ⎿  Wrote 271 lines to skills/mermaid-generator/references/mermaid-flowchart-syntax.md            
     # Mermaid Flowchart Syntax Reference
     This reference guide covers Mermaid flowchart syntax for generating interactive workflow
     diagrams.
     ## Basic Structure
     Every Mermaid flowchart starts with a direction declaration:
     ```mermaid
     flowchart TD
     … +261 lines (ctrl+o to expand)

⏺ Bash(mkdir -p $HOME/Documents/ws/claude-skills/skills/mermaid-generator/assets/template)
  ⎿  (No content)

⏺ Write(skills/mermaid-generator/assets/template/main.html)
  ⎿  Wrote 47 lines to skills/mermaid-generator/assets/template/main.html                          
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{{TITLE}}</title>
         <link rel="stylesheet" href="style.css">
         <script type="module">
             import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
             mermaid.initialize({

     … +37 lines (ctrl+o to expand)

⏺ Write(skills/mermaid-generator/assets/template/style.css)
  ⎿  Wrote 165 lines to skills/mermaid-generator/assets/template/style.css
     /* Mermaid Diagram Stylesheet */
     :root {
         --primary-color: #667eea;
         --secondary-color: #764ba2;
         --background-color: #f8f9fa;
         --text-color: #2c3e50;
         --border-color: #dee2e6;
         --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
     … +155 lines (ctrl+o to expand)

⏺ Write(skills/mermaid-generator/assets/template/index.md)
  ⎿  Wrote 41 lines to skills/mermaid-generator/assets/template/index.md                           
     # {{TITLE}}
     ## Overview
     {{OVERVIEW}}
     ## Interactive Diagram
     <iframe src="main.html" width="100%" height="600px" style="border: 1px solid #ddd; 
     border-radius: 8px;"></iframe>
     … +31 lines (ctrl+o to expand)

⏺ Write(skills/mermaid-generator/assets/template/metadata.json)
  ⎿  Wrote 23 lines to skills/mermaid-generator/assets/template/metadata.json
     {
       "title": "{{TITLE}}",
       "description": "{{DESCRIPTION}}",
       "subject": "{{SUBJECT}}",
       "creator": "Claude AI with Mermaid Generator Skill",
       "date": "{{DATE}}",
       "type": "Interactive Workflow Diagram",
       "format": "text/html",
       "language": "en-US",
       "coverage": "{{COVERAGE}}",
     … +13 lines (ctrl+o to expand)

⏺ Write(skills/mermaid-generator/assets/template/script.js)
  ⎿  Wrote 200 lines to skills/mermaid-generator/assets/template/script.js              
     /**
      * Mermaid Diagram Interactive Features
      *
      * This file provides additional interactive functionality for the Mermaid diagram.
      * Mermaid.js handles the core diagram rendering automatically.
      */
     // Wait for the DOM to be fully loaded
     document.addEventListener('DOMContentLoaded', function() {
         console.log('Mermaid diagram loaded successfully');
     … +190 lines (ctrl+o to expand)

⏺ Write(skills/mermaid-generator/SKILL.md)
  ⎿  Updated skills/mermaid-generator/SKILL.md with 483 additions and 53 removals                
         1    ---
         2    name: mermaid-generator
         3 -  description: [TODO: Complete and informative explanation of what the skill does and
           -  when to use it. Include WHEN to use this skill - specific scenarios, file types, or
           -  tasks that trigger it.]
         3 +  description: This skill generates interactive workflow diagrams using the Mermaid 
           + JavaScript library. Use this skill when users request creating flowcharts, process 
           + diagrams, workflow visualizations, or decision trees for educational textbooks. The 
           + skill creates MicroSim packages with standalone HTML files featuring colorful 
           + backgrounds, 16-point fonts, and top-down rendering by default, saved to /docs/sims/
           +  following the MicroSim pattern.
         4    ---
         5    
         6 -  # Mermaid Generator
         6 +  # Mermaid Diagram Generator
         7    
         8    ## Overview
         9    
        10 -  [TODO: 1-2 sentences explaining what this skill enables]
        10 +  Generate interactive workflow diagrams using Mermaid.js for intelligent textbooks. 
           + Creates complete MicroSim packages with standalone HTML files, MkDocs integration, 
           + and Dublin Core metadata. Each diagram features colorful node backgrounds, 16-point 
           + fonts for optimal readability, and follows the educational MicroSim pattern.
        11    
        12 -  ## Structuring This Skill
        12 +  ## When to Use This Skill
        13    
        14 -  [TODO: Choose the structure that best fits this skill's purpose. Common patterns:
        14 +  Use the mermaid-generator skill when users request:
        15    
        16 -  **1. Workflow-Based** (best for sequential processes)
        17 -  - Works well when there are clear step-by-step procedures
        18 -  - Example: DOCX skill with "Workflow Decision Tree" → "Reading" → "Creating" → 
           - "Editing"
        19 -  - Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ## Step 2...
        16 +  - Workflow diagrams or process flows
        17 +  - Decision trees with branching logic
        18 +  - Algorithm visualizations
        19 +  - System architecture flows
        20 +  - Educational process diagrams
        21 +  - Step-by-step procedure illustrations
        22 +  - State transition diagrams
        23 +  - Any flowchart-style visualization
        24    
        25 -  **2. Task-Based** (best for tool collections)
        26 -  - Works well when the skill offers different operations/capabilities
        27 -  - Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" → "Extract 
           - Text"
        28 -  - Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task Category 
           - 2...
        25 +  **Example user requests:**
        26 +  - "Create a flowchart showing the software development lifecycle"
        27 +  - "Generate a workflow diagram for the scientific method"
        28 +  - "Make a decision tree for troubleshooting network issues"
        29 +  - "Visualize the process of photosynthesis as a diagram"
        30    
        31 -  **3. Reference/Guidelines** (best for standards or specifications)
        32 -  - Works well for brand guidelines, coding standards, or requirements
        33 -  - Example: Brand styling with "Brand Guidelines" → "Colors" → "Typography" → 
           - "Features"
        34 -  - Structure: ## Overview → ## Guidelines → ## Specifications → ## Usage...
        31 +  ## Workflow
        32    
        33 -  **4. Capabilities-Based** (best for integrated systems)
        34 -  - Works well when the skill provides multiple interrelated features
        35 -  - Example: Product Management with "Core Capabilities" → numbered capability list
        36 -  - Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ### 2. 
           - Feature...
        33 +  ### Step 1: Gather Diagram Requirements
        34    
        35 -  Patterns can be mixed and matched as needed. Most skills combine patterns (e.g., 
           - start with task-based, add workflow for complex operations).
        35 +  Analyze the user's description to extract:
        36    
        37 -  Delete this entire "Structuring This Skill" section when done - it's just 
           - guidance.]
        37 +  1. **Diagram Purpose**: What process or workflow is being illustrated?
        38 +  2. **Key Steps**: What are the main nodes/steps in the workflow?
        39 +  3. **Decision Points**: Are there branching decisions (if/then)?
        40 +  4. **Flow Direction**: Should it be top-down (TD), left-right (LR), or other?
        41 +  5. **Start/End Points**: Where does the process begin and end?
        42    
        43 -  ## [TODO: Replace with the first main section based on chosen structure]
        43 +  **If the description is incomplete or unclear**, prompt the user for additional 
           + information:
        44    
        45 -  [TODO: Add content here. See examples in existing skills:
        46 -  - Code samples for technical skills
        47 -  - Decision trees for complex workflows
        48 -  - Concrete examples with realistic user requests
        49 -  - References to scripts/templates/references as needed]
        45 +  ```
        46 +  To create an accurate workflow diagram, I need more information:
        47    
        48 +  1. What are the main steps in this process?
        49 +  2. Are there any decision points where the flow branches?
        50 +  3. What happens in success vs. error scenarios?
        51 +  4. Should this flow top-down or left-right?
        52 +  ```
        53 +  
        54 +  **Required information before proceeding:**
        55 +  - At least 3-5 distinct steps/nodes
        56 +  - Clear start and end points
        57 +  - Understanding of the flow sequence
        58 +  
        59 +  ### Step 2: Design the Mermaid Flowchart
        60 +  
        61 +  Consult `references/mermaid-flowchart-syntax.md` for detailed syntax guidance.
        62 +  
        63 +  **Design decisions:**
        64 +  
        65 +  1. **Choose node shapes** based on purpose:
        66 +     - Rounded rectangles `("Label")` for start/end
        67 +     - Rectangles `["Label"]` for process steps
        68 +     - Diamonds `{"Decision?"}` for decision points
        69 +     - Circles `(("Label"))` for connectors
        70 +  
        71 +  2. **Select color palette** from reference guide:
        72 +     - Vibrant (purple/blue/pink) for engaging diagrams
        73 +     - Professional (turquoise/mint/coral) for formal content
        74 +     - Ocean (blue spectrum) for technical content
        75 +     - Or create custom palette matching textbook theme
        76 +  
        77 +  3. **Define style classes** for consistent theming:
        78 +     ```
        79 +     classDef startNode 
           + fill:#667eea,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
        80 +     classDef processNode 
           + fill:#764ba2,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
        81 +     classDef decisionNode 
           + fill:#f093fb,stroke:#333,stroke-width:2px,color:#333,font-size:16px
        82 +     ```
        83 +  
        84 +  4. **Ensure 16pt fonts** for all nodes and edge labels:
        85 +     - Set `font-size:16px` in all classDef declarations
        86 +     - Apply to edge labels: `linkStyle default font-size:16px`
        87 +  
        88 +  5. **Use top-down direction** unless user specifies otherwise:
        89 +     ```
        90 +     flowchart TD
        91 +     ```
        92 +  
        93 +  **Example Mermaid code structure:**
        94 +  
        95 +  ```mermaid
        96 +  flowchart TD
        97 +      Start("Start Process"):::startNode
        98 +      Step1["Gather Input"]:::processNode
        99 +      Decision{"Valid Input?"}:::decisionNode
       100 +      Step2["Process Data"]:::processNode
       101 +      Success("Success"):::successNode
       102 +      Error("Error - Retry"):::errorNode
       103 +  
       104 +      Start --> Step1 --> Decision
       105 +      Decision -->|Yes| Step2 --> Success
       106 +      Decision -->|No| Error --> Step1
       107 +  
       108 +      classDef startNode 
           + fill:#667eea,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       109 +      classDef processNode 
           + fill:#764ba2,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       110 +      classDef decisionNode 
           + fill:#f093fb,stroke:#333,stroke-width:2px,color:#333,font-size:16px
       111 +      classDef successNode 
           + fill:#4facfe,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       112 +      classDef errorNode 
           + fill:#fa709a,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       113 +  
       114 +      linkStyle default stroke:#999,stroke-width:2px,font-size:16px
       115 +  ```
       116 +  
       117 +  ### Step 3: Create the MicroSim Directory Structure
       118 +  
       119 +  Create the diagram directory following the MicroSim pattern:
       120 +  
       121 +  ```bash
       122 +  mkdir -p /docs/sims/[diagram-name]
       123 +  ```
       124 +  
       125 +  **Naming convention:**
       126 +  - Use kebab-case (lowercase with hyphens)
       127 +  - Descriptive and concise
       128 +  - Examples: `software-lifecycle`, `scientific-method`, `network-troubleshooting`
       129 +  
       130 +  ### Step 4: Generate Files from Templates
       131 +  
       132 +  Use the template files in `assets/template/` as a starting point. Replace 
           + placeholders with actual content:
       133 +  
       134 +  #### 4.1 Create main.html
       135 +  
       136 +  Copy `assets/template/main.html` and replace these placeholders:
       137 +  
       138 +  - `{{TITLE}}`: Diagram title (e.g., "Software Development Lifecycle")
       139 +  - `{{SUBTITLE}}`: Brief subtitle (e.g., "Interactive Workflow Diagram")
       140 +  - `{{MERMAID_CODE}}`: The complete Mermaid flowchart code (from Step 2)
       141 +  - `{{DESCRIPTION}}`: 2-3 sentence explanation of the diagram
       142 +  
       143 +  **Important:** Ensure proper indentation of the Mermaid code within the `<div 
           + class="mermaid">` tag.
       144 +  
       145 +  #### 4.2 Create style.css
       146 +  
       147 +  Copy `assets/template/style.css` directly - no modifications needed unless custom 
           + styling is requested.
       148 +  
       149 +  The default stylesheet ensures:
       150 +  - 16px font size for diagram elements
       151 +  - Responsive design for mobile devices
       152 +  - Clean, professional appearance
       153 +  - Print-friendly styling
       154 +  
       155 +  #### 4.3 Create script.js
       156 +  
       157 +  Copy `assets/template/script.js` directly. This provides:
       158 +  - Zoom controls for large diagrams
       159 +  - Export to SVG functionality
       160 +  - Node interaction tracking
       161 +  - Accessibility features
       162 +  
       163 +  #### 4.4 Create index.md
       164 +  
       165 +  Copy `assets/template/index.md` and replace placeholders:
       166 +  
       167 +  - `{{TITLE}}`: Same as main.html title
       168 +  - `{{OVERVIEW}}`: 1-paragraph overview of the workflow
       169 +  - `{{DESCRIPTION}}`: Detailed description of the process
       170 +  - `{{WORKFLOW_STEPS}}`: Bulleted list of main steps:
       171 +    ```markdown
       172 +    1. **Step Name** - Description of what happens
       173 +    2. **Decision Point** - What decision is being made
       174 +    3. **Final Step** - How the process concludes
       175 +    ```
       176 +  - `{{KEY_CONCEPTS}}`: Bulleted list of educational concepts illustrated
       177 +  - `{{RELATED_CONCEPTS}}`: Links to related textbook sections or concepts
       178 +  
       179 +  #### 4.5 Create metadata.json
       180 +  
       181 +  Copy `assets/template/metadata.json` and replace placeholders:
       182 +  
       183 +  - `{{TITLE}}`: Diagram title
       184 +  - `{{DESCRIPTION}}`: Brief description
       185 +  - `{{SUBJECT}}`: Educational subject area (e.g., "Computer Science", "Biology")
       186 +  - `{{DATE}}`: Current date in ISO format (YYYY-MM-DD)
       187 +  - `{{COVERAGE}}`: Scope of content (e.g., "Introductory", "Advanced")
       188 +  - `{{AUDIENCE}}`: Target audience (e.g., "High School", "Undergraduate")
       189 +  - `{{NODE_COUNT}}`: Number of nodes in diagram
       190 +  - `{{EDGE_COUNT}}`: Number of edges/arrows in diagram
       191 +  - `{{CONCEPTS_LIST}}`: JSON array of concept labels (e.g., `"Algorithm Design", 
           + "Data Validation"`)
       192 +  - `{{BLOOM_LEVEL}}`: Highest Bloom's Taxonomy level addressed (e.g., "Understand", 
           + "Apply", "Analyze")
       193 +  
       194 +  **Example metadata.json:**
       195 +  
       196 +  ```json
       197 +  {
       198 +    "title": "Software Development Lifecycle",
       199 +    "description": "Interactive workflow diagram showing the phases of software 
           + development from planning through deployment",
       200 +    "subject": "Computer Science",
       201 +    "creator": "Claude AI with Mermaid Generator Skill",
       202 +    "date": "2025-11-06",
       203 +    "type": "Interactive Workflow Diagram",
       204 +    "format": "text/html",
       205 +    "language": "en-US",
       206 +    "coverage": "Introductory",
       207 +    "rights": "CC BY-NC-SA 4.0",
       208 +    "audience": "Undergraduate",
       209 +    "diagram_type": "flowchart",
       210 +    "direction": "TD",
       211 +    "node_count": "8",
       212 +    "edge_count": "10",
       213 +    "concepts": [
       214 +      "Requirements Analysis",
       215 +      "System Design",
       216 +      "Implementation",
       217 +      "Testing",
       218 +      "Deployment",
       219 +      "Maintenance"
       220 +    ],
       221 +    "bloom_taxonomy": "Understand",
       222 +    "version": "1.0"
       223 +  }
       224 +  ```
       225 +  
       226 +  ### Step 5: Update MkDocs Navigation
       227 +  
       228 +  Add the new diagram to the textbook's navigation in `mkdocs.yml`:
       229 +  
       230 +  ```yaml
       231 +  nav:
       232 +    - Visualizations:
       233 +      - Software Lifecycle: sims/software-lifecycle/index.md
       234 +  ```
       235 +  
       236 +  Or integrate into relevant chapter navigation:
       237 +  
       238 +  ```yaml
       239 +  nav:
       240 +    - Chapter 3 - Software Engineering:
       241 +      - Introduction: chapters/03/index.md
       242 +      - Lifecycle Diagram: sims/software-lifecycle/index.md
       243 +  ```
       244 +  
       245 +  ### Step 6: Validate and Test
       246 +  
       247 +  Perform quality checks:
       248 +  
       249 +  1. **Syntax validation**: Ensure Mermaid code renders without errors
       250 +  2. **File structure**: Verify all 5 files are present (index.md, metadata.json, 
           + style.css, main.html, script.js)
       251 +  3. **Placeholder replacement**: Check that no `{{PLACEHOLDERS}}` remain
       252 +  4. **Font size verification**: Confirm 16px fonts in Mermaid code and CSS
       253 +  5. **Color contrast**: Ensure text is readable on colored backgrounds
       254 +  6. **Responsive design**: Test that diagram works on different screen sizes
       255 +  
       256 +  **Test the diagram:**
       257 +  
       258 +  ```bash
       259 +  cd /docs
       260 +  mkdocs serve
       261 +  # Navigate to http://localhost:8000/sims/[diagram-name]/
       262 +  ```
       263 +  
       264 +  Open main.html directly in browser to test standalone functionality.
       265 +  
       266 +  ### Step 7: Inform the User
       267 +  
       268 +  Provide a summary of what was created:
       269 +  
       270 +  ```
       271 +  Created interactive Mermaid workflow diagram: [Diagram Name]
       272 +  
       273 +  Location: /docs/sims/[diagram-name]/
       274 +  
       275 +  Files generated:
       276 +  ✓ main.html - Standalone interactive diagram
       277 +  ✓ index.md - MkDocs integration page
       278 +  ✓ style.css - Responsive styling
       279 +  ✓ script.js - Interactive features (zoom, export)
       280 +  ✓ metadata.json - Dublin Core metadata
       281 +  
       282 +  Features:
       283 +  • Top-down flowchart layout
       284 +  • Colorful node backgrounds for visual clarity
       285 +  • 16-point fonts for optimal readability
       286 +  • [X] nodes and [Y] edges
       287 +  • Zoom controls and SVG export
       288 +  
       289 +  The diagram illustrates: [brief description]
       290 +  
       291 +  To view:
       292 +  1. Standalone: Open /docs/sims/[diagram-name]/main.html
       293 +  2. In textbook: Run `mkdocs serve` and navigate to the page
       294 +  
       295 +  Next steps:
       296 +  - Add navigation link in mkdocs.yml
       297 +  - Reference from relevant chapter content
       298 +  - Consider creating related diagrams for connected concepts
       299 +  ```
       300 +  
       301 +  ## Best Practices
       302 +  
       303 +  ### Design Principles
       304 +  
       305 +  1. **Clarity over Complexity**: Keep diagrams focused on core workflow - if too 
           + complex, consider breaking into multiple diagrams
       306 +  2. **Consistent Styling**: Use the same color palette across related diagrams in a 
           + textbook
       307 +  3. **Meaningful Labels**: Use clear, concise labels (2-5 words max per node)
       308 +  4. **Logical Flow**: Ensure arrows flow in expected reading direction (top-down or 
           + left-right)
       309 +  5. **Color Semantics**: Use colors consistently (e.g., green for success, red for 
           + errors)
       310 +  
       311 +  ### Accessibility
       312 +  
       313 +  1. **Font Size**: Always use 16px minimum for readability
       314 +  2. **Color Contrast**: Ensure WCAG AA contrast ratios (4.5:1 minimum)
       315 +  3. **Text Alternatives**: Provide descriptive text in index.md
       316 +  4. **Semantic HTML**: Use proper heading structure in documentation
       317 +  
       318 +  ### Educational Integration
       319 +  
       320 +  1. **Align with Learning Goals**: Map diagram to specific learning objectives
       321 +  2. **Bloom's Taxonomy**: Tag with appropriate cognitive level
       322 +  3. **Concept Dependencies**: Link to prerequisite concepts in learning graph
       323 +  4. **Practice Exercises**: Consider adding comprehension questions in index.md
       324 +  
       325 +  ### Common Patterns
       326 +  
       327 +  **Linear Process Flow:**
       328 +  ```
       329 +  Start → Step 1 → Step 2 → Step 3 → End
       330 +  ```
       331 +  
       332 +  **Decision Tree:**
       333 +  ```
       334 +  Start → Decision 1 (Yes/No)
       335 +    ├─ Yes → Action A → End
       336 +    └─ No → Decision 2 (Yes/No)
       337 +        ├─ Yes → Action B → End
       338 +        └─ No → Action C → End
       339 +  ```
       340 +  
       341 +  **Loop/Iteration:**
       342 +  ```
       343 +  Start → Initialize → Process → Check Complete?
       344 +    ├─ No → Process (loop back)
       345 +    └─ Yes → End
       346 +  ```
       347 +  
       348 +  **Error Handling:**
       349 +  ```
       350 +  Start → Try Action → Success?
       351 +    ├─ Yes → Continue → End
       352 +    └─ No → Error Handler → Retry or Exit
       353 +  ```
       354 +  
       355 +  ## Troubleshooting
       356 +  
       357 +  ### Common Issues
       358 +  
       359 +  **Issue: Mermaid code doesn't render**
       360 +  - Check for syntax errors (missing quotes, brackets)
       361 +  - Ensure `flowchart TD` directive is first line
       362 +  - Verify no reserved keywords used as IDs (like "end" in lowercase)
       363 +  
       364 +  **Issue: Fonts not 16px**
       365 +  - Verify `font-size:16px` in all classDef declarations
       366 +  - Check `linkStyle default font-size:16px` is present
       367 +  - Ensure style.css includes `.mermaid .node text` styling
       368 +  
       369 +  **Issue: Colors not showing**
       370 +  - Confirm classDef declarations come after flowchart code
       371 +  - Verify `:::className` syntax on nodes
       372 +  - Check hex color codes are valid
       373 +  
       374 +  **Issue: Diagram too large/small**
       375 +  - Adjust node count (split into multiple diagrams if >15 nodes)
       376 +  - Use zoom controls in script.js
       377 +  - Modify CSS max-width settings
       378 +  
       379 +  **Issue: Labels cut off or truncated**
       380 +  - Shorten label text
       381 +  - Use markdown strings for auto-wrapping: `A["Text **bold**"]`
       382 +  - Increase diagram container width in CSS
       383 +  
       384    ## Resources
       385    
       386 -  This skill includes example resource directories that demonstrate how to organize 
           - different types of bundled resources:
       386 +  ### Bundled References
       387    
       388 -  ### scripts/
       389 -  Executable code (Python/Bash/etc.) that can be run directly to perform specific 
           - operations.
       388 +  - **`references/mermaid-flowchart-syntax.md`**: Comprehensive Mermaid syntax guide 
           + with examples, node shapes, styling options, and color palettes
       389    
       390 -  **Examples from other skills:**
       391 -  - PDF skill: `fill_fillable_fields.py`, `extract_form_field_info.py` - utilities 
           - for PDF manipulation
       392 -  - DOCX skill: `document.py`, `utilities.py` - Python modules for document 
           - processing
       390 +  ### Bundled Templates
       391    
       392 -  **Appropriate for:** Python scripts, shell scripts, or any executable code that 
           - performs automation, data processing, or specific operations.
       392 +  - **`assets/template/main.html`**: Standalone HTML diagram template
       393 +  - **`assets/template/style.css`**: Responsive stylesheet with 16px fonts
       394 +  - **`assets/template/script.js`**: Interactive features (zoom, export, tracking)
       395 +  - **`assets/template/index.md`**: MkDocs integration template
       396 +  - **`assets/template/metadata.json`**: Dublin Core metadata template
       397    
       398 -  **Note:** Scripts may be executed without loading into context, but can still be 
           - read by Claude for patching or environment adjustments.
       398 +  ### External Resources
       399    
       400 -  ### references/
       401 -  Documentation and reference material intended to be loaded into context to inform 
           - Claude's process and thinking.
       400 +  - Mermaid.js Documentation: https://mermaid.js.org/
       401 +  - MkDocs Material Theme: https://squidfunk.github.io/mkdocs-material/
       402 +  - Dublin Core Metadata: https://www.dublincore.org/specifications/dublin-core/
       403    
       404 -  **Examples from other skills:**
       405 -  - Product management: `communication.md`, `context_building.md` - detailed workflow
           -  guides
       406 -  - BigQuery: API reference documentation and query examples
       407 -  - Finance: Schema documentation, company policies
       404 +  ## Examples
       405    
       406 -  **Appropriate for:** In-depth documentation, API references, database schemas, 
           - comprehensive guides, or any detailed information that Claude should reference while
           -  working.
       406 +  ### Example 1: Simple Linear Workflow
       407    
       408 -  ### assets/
       409 -  Files not intended to be loaded into context, but rather used within the output 
           - Claude produces.
       408 +  **User Request:** "Create a diagram showing the steps of making coffee"
       409    
       410 -  **Examples from other skills:**
       411 -  - Brand styling: PowerPoint template files (.pptx), logo files
       412 -  - Frontend builder: HTML/React boilerplate project directories
       413 -  - Typography: Font files (.ttf, .woff2)
       410 +  **Generated Mermaid Code:**
       411    
       412 -  **Appropriate for:** Templates, boilerplate code, document templates, images, 
           - icons, fonts, or any files meant to be copied or used in the final output.
       412 +  ```mermaid
       413 +  flowchart TD
       414 +      Start("Start"):::startNode
       415 +      Step1["Boil Water"]:::processNode
       416 +      Step2["Grind Coffee Beans"]:::processNode
       417 +      Step3["Add Coffee to Filter"]:::processNode
       418 +      Step4["Pour Hot Water"]:::processNode
       419 +      Step5["Wait 4 Minutes"]:::processNode
       420 +      End("Enjoy Coffee!"):::endNode
       421    
       422 -  ---
       422 +      Start --> Step1 --> Step2 --> Step3 --> Step4 --> Step5 --> End
       423    
       424 -  **Any unneeded directories can be deleted.** Not every skill requires all three 
           - types of resources.
       424 +      classDef startNode 
           + fill:#4ecdc4,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       425 +      classDef processNode 
           + fill:#95e1d3,stroke:#333,stroke-width:2px,color:#333,font-size:16px
       426 +      classDef endNode 
           + fill:#6c5ce7,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       427 +  
       428 +      linkStyle default stroke:#999,stroke-width:2px,font-size:16px
       429 +  ```
       430 +  
       431 +  ### Example 2: Decision-Based Workflow
       432 +  
       433 +  **User Request:** "Create a flowchart for troubleshooting a computer that won't 
           + start"
       434 +  
       435 +  **Generated Mermaid Code:**
       436 +  
       437 +  ```mermaid
       438 +  flowchart TD
       439 +      Start("Computer Won't Start"):::startNode
       440 +      Check1{"Is it plugged in?"}:::decisionNode
       441 +      Fix1["Plug in power cable"]:::processNode
       442 +      Check2{"Does it have power?"}:::decisionNode
       443 +      Check3{"Do you hear beeps?"}:::decisionNode
       444 +      Fix2["Check power supply"]:::processNode
       445 +      Fix3["Check RAM seating"]:::processNode
       446 +      Fix4["Call technician"]:::processNode
       447 +      Success("Computer Started!"):::successNode
       448 +  
       449 +      Start --> Check1
       450 +      Check1 -->|No| Fix1 --> Check2
       451 +      Check1 -->|Yes| Check2
       452 +      Check2 -->|No| Fix2 --> Success
       453 +      Check2 -->|Yes| Check3
       454 +      Check3 -->|Yes| Fix3 --> Success
       455 +      Check3 -->|No| Fix4
       456 +  
       457 +      classDef startNode 
           + fill:#667eea,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       458 +      classDef processNode 
           + fill:#764ba2,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       459 +      classDef decisionNode 
           + fill:#f093fb,stroke:#333,stroke-width:2px,color:#333,font-size:16px
       460 +      classDef successNode 
           + fill:#4facfe,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       461 +  
       462 +      linkStyle default stroke:#999,stroke-width:2px,font-size:16px
       463 +  ```
       464 +  
       465 +  ### Example 3: Loop-Based Algorithm
       466 +  
       467 +  **User Request:** "Visualize a simple search algorithm"
       468 +  
       469 +  **Generated Mermaid Code:**
       470 +  
       471 +  ```mermaid
       472 +  flowchart TD
       473 +      Start("Start Search"):::startNode
       474 +      Input["Get search target"]:::processNode
       475 +      Init["Set index = 0"]:::processNode
       476 +      Loop["Check array[index]"]:::processNode
       477 +      Match{"Match found?"}:::decisionNode
       478 +      End{"More items?"}:::decisionNode
       479 +      Increment["index = index + 1"]:::processNode
       480 +      Success("Return index"):::successNode
       481 +      Fail("Return -1"):::errorNode
       482 +  
       483 +      Start --> Input --> Init --> Loop --> Match
       484 +      Match -->|Yes| Success
       485 +      Match -->|No| End
       486 +      End -->|Yes| Increment --> Loop
       487 +      End -->|No| Fail
       488 +  
       489 +      classDef startNode 
           + fill:#0083b0,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       490 +      classDef processNode 
           + fill:#00b4d8,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       491 +      classDef decisionNode 
           + fill:#90e0ef,stroke:#333,stroke-width:2px,color:#333,font-size:16px
       492 +      classDef successNode 
           + fill:#48cae4,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       493 +      classDef errorNode 
           + fill:#0077b6,stroke:#333,stroke-width:2px,color:#fff,font-size:16px
       494 +  
       495 +      linkStyle default stroke:#999,stroke-width:2px,font-size:16px
       496 +  ```
       497 +  
       498 +  ## Integration with Other Skills
       499 +  
       500 +  This skill works well with other intelligent textbook skills:
       501 +  
       502 +  - **learning-graph-generator**: Create diagrams for concepts in the learning graph
       503 +  - **chapter-content-generator**: Embed diagrams in chapter content
       504 +  - **microsim-p5**: Use Mermaid for static workflow diagrams, p5.js for dynamic 
           + simulations
       505 +  - **quiz-generator**: Create questions about workflow understanding
       506 +  - **glossary-generator**: Define terms used in diagram labels
       507 +  
       508 +  ## Version History
       509 +  
       510 +  **v1.0** - Initial release
       511 +  - Flowchart diagram generation
       512 +  - MicroSim package creation
       513 +  - 16pt fonts and colorful styling
       514 +  - Top-down rendering default
       515 +  - Dublin Core metadata support

⏺ Bash(python3 $HOME/.claude/skills/skill-creator/scripts/package_skill.py
      $HOME/Documents/ws/claude-skills/skills/mermaid-generator)
  ⎿  📦 Packaging skill: $HOME/Documents/ws/claude-skills/skills/mermaid-generator

     🔍 Validating skill...
     … +11 lines (ctrl+o to expand)

⏺ Perfect! I've successfully created the mermaid-generator skill. Here's what was built:

  Created Skill: mermaid-generator

  Location: $HOME/Documents/ws/claude-skills/skills/mermaid-generator/

  Packaged file: mermaid-generator.zip (ready for distribution)

  Skill Components

  Core Workflow (SKILL.md):
  - 7-step process for generating Mermaid workflow diagrams
  - Includes requirement gathering with user prompts for incomplete descriptions
  - Design guidance for colorful backgrounds and 16pt fonts
  - MicroSim directory structure creation
  - Template-based file generation
  - MkDocs navigation integration
  - Validation and testing procedures

  Reference Documentation:
  - references/mermaid-flowchart-syntax.md - Comprehensive guide covering:
    - Node shapes (rectangles, diamonds, circles, etc.)
    - Edge types and labeled transitions
    - Styling with 16px fonts
    - Three color palettes (Vibrant, Professional, Ocean)
    - Common workflow patterns
    - Interactive features

  Template Assets (assets/template/):
  1. main.html - Standalone Mermaid diagram with CDN loading
  2. style.css - Responsive styling with 16px font enforcement
  3. script.js - Interactive features (zoom controls, SVG export, node tracking)
  4. index.md - MkDocs integration template with placeholders
  5. metadata.json - Dublin Core metadata template

  Key Features

  - Top-down rendering by default (flowchart TD)
  - 16-point fonts enforced in both CSS and Mermaid classDef
  - Colorful backgrounds with three pre-defined palettes
  - MicroSim pattern compatibility (saves to /docs/sims/NAME/)
  - User prompting when diagram description is incomplete
  - Complete examples including linear workflows, decision trees, and loops
  - Integration guidance with other intelligent textbook skills

  Usage

  To use this skill:

  1. Install globally:
  # Extract mermaid-generator.zip to ~/.claude/skills/
  unzip mermaid-generator.zip -d ~/.claude/skills/
  2. Invoke the skill:
  /skill mermaid-generator
  3. Example request:
  "Create a flowchart showing the software development lifecycle"

  Validation Status

  ✅ All validation checks passed:
  - YAML frontmatter format correct
  - Skill naming conventions followed
  - Complete description provided
  - All template files present
  - Reference documentation included

  The skill is now ready to generate interactive Mermaid workflow diagrams for your intelligent
  textbooks!