Layered Architecture Diagram Renderer

Transforms Architecture DSL module-view code into self-contained HTML diagrams.

Quick Reference

Available Styles

⚠️ CRITICAL RULES

1. Always Use Corporate Style

DEFAULT TEMPLATE: templates/module-view-corporate.html

⛔ NEVER use module-view.html unless DSL explicitly contains style "default"

2. No Invention Rule

You MUST NOT add any content that doesn't exist in the DSL:

• •❌ Do NOT invent layer headers/titles
• •❌ Do NOT add extra components
• •❌ Do NOT add tooltips/descriptions
• •❌ Do NOT add classes/variants not specified by stereotypes

3. Required From DSL

You MUST include these elements when specified:

• •✅ title "..." → <h1 class="diagram-title">...</h1> at top
• •✅ layer "..." → Layer with side label
• •✅ module "..." → Module with title
• •✅ component "..." → Component with text

4. DSL-to-HTML Property Verification

After generating HTML, verify EACH property matches exactly:

5. Component Variant Rules

Default class is component. Only use variants when DSL specifies:

Execution Workflow

Step 1: Parse DSL

Extract from DSL:

• •title → Diagram title
• •style → Template selection (default: corporate)
• •theme → Design tokens (default: theme-default)
• •Structure: Layers → Modules → Components

Step 2: Load Theme

cat "x-ipe-docs/themes/${theme_name}/design-system.md"

Step 3: Generate HTML

Apply DSL values to template. See references/dsl-to-css.md.

Step 4: Verify

Check every cols, rows, grid value matches DSL exactly.

Step 5: Save Output

Save to specified path or same directory as DSL with .html extension.

Grid System

Corporate Style Colors

⚠️ CRITICAL: Corporate style ignores DSL color properties

DSL properties color and border-color are IGNORED when using corporate style. They only apply with style "default".

Resources

See Also

• •tool-architecture-dsl - DSL syntax
• •tool-draw-system-landscape - Landscape diagrams