Mermaid Diagrams

I specialize in:

• Automated diagram generation from source code
• Natural language to visual conversion
• Syntax validation and optimization
• Batch processing for documentation generation
• Integration with modern Bun/TypeScript development workflows

How I work

Core Capabilities

1. Code Analysis Engine

   • Parse Python functions and classes
   • Extract JavaScript/TypeScript module structures
   • Identify function calls and dependencies
   • Generate node-edge relationships for diagrams

2. Text-to-Diagram Conversion

   • Parse natural language descriptions
   • Extract actors, actions, and decision points
   • Map concepts to appropriate diagram elements
   • Generate structured Mermaid syntax

3. Multiple Diagram Types

   • Flowcharts: Process flows, decision trees, authentication flows
   • Sequence Diagrams: Service interactions, API calls, user journeys
   • Class Diagrams: Software architecture, data models, class relationships
   • State Diagrams: State machines, application lifecycle, user states
   • Gantt Charts: Project timelines, task scheduling, milestone planning
   • Git Graphs: Version history, branch management, release patterns

4. Validation & Optimization

   • Syntax checking for all Mermaid diagram types
   • Layout optimization for better readability
   • Error detection and helpful suggestions
   • Performance optimization for large diagrams

Technical Implementation

The skill uses a modular architecture:

// Core components
- MermaidDiagramsSkill: Main skill class
- CodeAnalyzer: Source code parsing and analysis
- TextAnalyzer: Natural language processing
- MermaidGenerator: Diagram code generation
- MermaidValidator: Syntax validation and optimization

Usage Patterns

From Code Analysis:

const skill = await createSkill();
const result = await skill.analyze("src/auth/", "flowchart");
console.log(result.mermaid_code);

From Text Description:

const result = await skill.generate(
  "User logs in, system validates credentials, redirects to dashboard"
);

Batch Generation:

const results = await skill.batchGenerate("config.json", "docs/");

Output Format

All results include:

• Generated Mermaid code (ready for markdown)
• Analysis metadata (source information)
• Validation results (errors, warnings, suggestions)
• Optional file output paths

Integration Points

I work well with:

• documentation-writer - for comprehensive documentation
• code-review - for visualizing code changes
• git-release - for release workflow diagrams

Requirements & Limitations

Requirements

• Bun runtime environment
• TypeScript support
• File system access for code analysis
• Node.js/Bun APIs for file operations

Limitations

• Supports Python, JavaScript, and TypeScript code analysis
• Text analysis works best with structured descriptions
• Large codebases may require selective analysis patterns
• Complex natural language may need clarification

Best Practices

• Use specific, focused code paths for analysis
• Provide clear, structured text descriptions
• Configure exclude patterns for large codebases
• Validate generated diagrams before use
• Use batch processing for documentation generation

Focus on providing clear, accurate visual representations that enhance understanding and communication of complex concepts.