Home / books / learning-larc / diagrams / DIAGRAM-INDEX

Complete Diagram Index

All Diagrams by Chapter

Chapter 1: Philosophy and Background

  • 12-traditional-vs-larc.md
- Development workflow comparison - Architecture complexity comparison - Bundle size comparison - Learning curve comparison - When to choose each technology

Chapter 2: Core Concepts

  • 02-component-structure.md
- Component anatomy - Component lifecycle flow - Communication patterns
  • 01-architecture-overview.md
- High-level LARC architecture - Component communication flow - No-build architecture - Module loading with import maps

Chapter 3: Getting Started

  • 01-architecture-overview.md
- Deployment architecture - Module loading system

Chapter 4: Creating Web Components

  • 02-component-structure.md
- Shadow DOM tree structure - CSS encapsulation - :host and :host-context - Slots and content projection

Chapter 5: The PAN Bus

  • 05-pan-bus.md
- Pub/Sub architecture - Message flow sequence - Topic namespace structure - Wildcard subscription matching - Request/Response pattern - Event patterns comparison - PAN bus internal architecture - Debugging with event inspector - Event lifecycle - Error handling

Chapter 6: State Management

  • 06-state-management.md
- State hierarchy - Component-local state flow - Reactive state with Proxy - Shared state pattern - IndexedDB cache-first strategy - Offline-first with sync queue - State synchronization patterns - pan-store component architecture - State update flow - Conflict resolution - State management decision tree

Chapter 8: Routing and Navigation

  • 08-routing.md
- Routing architecture - Navigation flow - Route matching algorithm - Nested routes - Route guards - History management - URL structure and query params - Router lifecycle - Programmatic navigation - Link interception - 404 Not Found handling - Scroll restoration

Chapter 9: Forms and Validation

  • Forms flow diagrams (can be added)
  • Validation patterns (can be added)

Chapter 10: Data Fetching and APIs

  • API communication patterns (can be added)
  • Caching strategies (can be added)

Chapter 11: Authentication and Security

  • 14-app-architecture.md
- Complete authentication flow - Token management - Protected routes

Chapter 18: Real-World Applications

  • 14-app-architecture.md
- Complete e-commerce architecture - Component interaction flow - Application startup sequence - Data flow architecture - Deployment architecture - Offline-first architecture - Real-time updates flow - Error handling strategy - Performance optimization strategy

Comparisons

  • 12-traditional-vs-larc.md
- All comparison diagrams

Diagrams by Type

Architecture Diagrams

  • High-level LARC architecture
  • Complete application architecture (e-commerce example)
  • Deployment architecture
  • Data flow architecture
  • Offline-first architecture

    • Component Diagrams

  • Component anatomy
  • Component structure
  • Component lifecycle
  • Shadow DOM structure
  • Slots and content projection

    • Communication Diagrams

  • PAN bus pub/sub architecture
  • Message flow sequences
  • Topic namespace structure
  • Event patterns
  • Component communication patterns

    • State Management Diagrams

  • State hierarchy
  • Reactive state patterns
  • IndexedDB caching
  • Offline sync queue
  • Conflict resolution

    • Routing Diagrams

  • Routing architecture
  • Navigation flow
  • Route matching
  • Route guards
  • History management

    • Comparison Diagrams

  • Traditional vs LARC workflows
  • Bundle size comparison
  • Learning curve comparison
  • Performance metrics
  • Code portability

    • Flow Diagrams

  • Authentication flow
  • Data fetching flow
  • Error handling flow
  • Component interaction flow
  • Real-time updates flow

    • Using These Diagrams

    In the Book

    Each diagram is referenced in its relevant chapter with context and explanation.

    For Presentations

    All diagrams can be exported as images for presentations: 
    npm install -g @mermaid-js/mermaid-cli
mmdc -i diagram.md -o diagram.png
mmdc -i diagram.md -o diagram.svg

    Interactive Exploration

    View the Mermaid diagrams interactively:
    • GitHub: Renders automatically
    • VS Code: Use "Markdown Preview Mermaid Support" extension
    • Online: https://mermaid.live (paste diagram code)

    Diagram Statistics

    • Total Diagram Files: 6
    • Total Individual Diagrams: 50+
    • Diagram Types:
    - Flowcharts: 25 - Sequence Diagrams: 10 - State Diagrams: 5 - Timelines: 1 - Graphs: 9+

    Adding New Diagrams

    When creating new diagrams:

  • Use consistent colors:
    • - LARC components: #667eea - PAN bus: #764ba2 - Success/positive: #48bb78 - Warning/caution: #f59e42 - Error/negative: #f56565
  • Follow naming convention:
    • - ##-category-name.md - Example: 09-form-validation.md
  • Include in this index
  • Add clear titles and descriptions
  • Test rendering in GitHub and locally

    • Diagram Export Commands

    # Export single diagram to PNG
mmdc -i diagrams/01-architecture-overview.md -o diagrams/png/architecture.png

# Export all diagrams
for file in diagrams/*.md; do
  mmdc -i "$file" -o "diagrams/png/$(basename $file .md).png"
done

# Export to SVG (scalable)
mmdc -i diagrams/05-pan-bus.md -o diagrams/svg/pan-bus.svg

# Export with custom theme
mmdc -i diagram.md -o output.png -t forest

    Contributing Diagrams

    To contribute new diagrams:

  • Create diagram using Mermaid syntax
  • Test locally or on mermaid.live
  • Follow style guidelines
  • Add to appropriate chapter section
  • Update this index
  • Submit pull request

    • Resources

    • Mermaid Documentation: https://mermaid.js.org
    • Mermaid Live Editor: https://mermaid.live
    • Mermaid CLI: https://github.com/mermaid-js/mermaid-cli
    • VS Code Extension: "Markdown Preview Mermaid Support"