sirena 0.1.0

data/examples/.gitignore

@@ -0,0 +1,10 @@
+# Ignore generated SVG files
+*/generated/
+
+# Ignore macOS files
+.DS_Store
+
+# Ignore editor files
+*.swp
+*.swo
+*~

data/examples/README.adoc

@@ -0,0 +1,196 @@
+= Sirena Examples
+
+This directory contains examples for all 24 supported diagram types in Sirena, a pure Ruby Mermaid diagram renderer.
+
+== Quick Start
+
+[source,bash]
+----
+# Render an example
+bundle exec ruby exe/sirena render examples/flowchart/01-basic-flow.mmd -o output.svg
+
+# Or use the library directly
+ruby -r ./lib/sirena -e 'puts Sirena.render(File.read("examples/flowchart/01-basic-flow.mmd"))'
+----
+
+== Diagram Types
+
+Each diagram type has its own subdirectory with examples and documentation.
+
+=== Flowcharts & Graphs
+
+==== link:flowchart/README.adoc[Flowchart]
+Process flows, workflows, and decision trees.
+
+* link:flowchart/01-basic-flow.mmd[01-basic-flow] - Basic process flow
+* link:flowchart/02-node-shapes.mmd[02-node-shapes] - Node shape varieties
+* link:flowchart/03-edge-types.mmd[03-edge-types] - Connection types
+* link:flowchart/04-subgraphs.mmd[04-subgraphs] - Grouped nodes
+* link:flowchart/05-styling.mmd[05-styling] - Node hierarchy
+* link:flowchart/06-complex-flow.mmd[06-complex-flow] - Multi-path workflow
+
+==== link:git_graph/[Git Graph]
+Version control branching and merging visualization.
+
+* link:git_graph/01-linear-history.mmd[01-linear-history] - Linear commit history
+
+==== link:mindmap/[Mindmap]
+Hierarchical concept mapping and brainstorming.
+
+* link:mindmap/01-simple-tree.mmd[01-simple-tree] - Basic mind map
+
+=== UML Diagrams
+
+==== link:sequence/[Sequence Diagram]
+Object interaction and message passing over time.
+
+* link:sequence/01-basic-sequence.mmd[01-basic-sequence] - Basic interactions
+
+==== link:class_diagram/[Class Diagram]
+Object-oriented class structure and relationships.
+
+* link:class_diagram/01-basic-classes.mmd[01-basic-classes] - Basic classes
+
+==== link:state_diagram/[State Diagram]
+State machine and lifecycle visualization.
+
+* link:state_diagram/01-simple-states.mmd[01-simple-states] - Basic states
+
+==== link:er_diagram/[ER Diagram]
+Entity-relationship database modeling.
+
+* link:er_diagram/01-basic-entities.mmd[01-basic-entities] - Basic entities
+
+=== Architecture & System Design
+
+==== link:c4/[C4 Diagram]
+Software architecture at different abstraction levels.
+
+* link:c4/01-context-diagram.mmd[01-context-diagram] - System context
+
+==== link:architecture/[Architecture Diagram]
+Service-based architecture visualization.
+
+* link:architecture/01-basic-services.mmd[01-basic-services] - Basic services
+
+==== link:block/[Block Diagram]
+Block-based layouts and connections.
+
+* link:block/01-basic-blocks.mmd[01-basic-blocks] - Basic blocks
+
+=== Project Management
+
+==== link:gantt/[Gantt Chart]
+Project timeline and task scheduling.
+
+* link:gantt/01-simple-timeline.mmd[01-simple-timeline] - Project timeline
+
+==== link:timeline/[Timeline]
+Historical events and chronological visualization.
+
+* link:timeline/01-simple-timeline.mmd[01-simple-timeline] - Event timeline
+
+==== link:kanban/[Kanban Board]
+Task workflow and status tracking.
+
+* link:kanban/01-simple-board.mmd[01-simple-board] - Basic board
+
+==== link:requirement/[Requirement Diagram]
+System requirements and traceability.
+
+* link:requirement/01-basic-requirements.mmd[01-basic-requirements] - Basic requirements
+
+==== link:user_journey/[User Journey]
+User experience mapping and satisfaction tracking.
+
+* link:user_journey/01-simple-journey.mmd[01-simple-journey] - Basic journey
+
+=== Data Visualization
+
+==== link:pie/[Pie Chart]
+Proportional data visualization.
+
+* link:pie/01-simple-chart.mmd[01-simple-chart] - Basic pie chart
+
+==== link:xychart/[XY Chart]
+Line and bar charts with axes.
+
+* link:xychart/01-line-chart.mmd[01-line-chart] - Line chart
+
+==== link:quadrant/[Quadrant Chart]
+2x2 matrix positioning and analysis.
+
+* link:quadrant/01-basic-quadrant.mmd[01-basic-quadrant] - Basic quadrant
+
+==== link:radar/[Radar Chart]
+Multi-dimensional data comparison.
+
+* link:radar/01-simple-radar.mmd[01-simple-radar] - Skill assessment
+
+==== link:treemap/[Treemap]
+Hierarchical data with size-based visualization.
+
+* link:treemap/01-basic-treemap.mmd[01-basic-treemap] - Disk usage
+
+==== link:sankey/[Sankey Diagram]
+Flow quantities between nodes.
+
+* link:sankey/01-simple-flow.mmd[01-simple-flow] - Basic flow
+
+=== Network & Technical
+
+==== link:packet/[Packet Diagram]
+Network protocol packet structure.
+
+* link:packet/01-basic-packet.mmd[01-basic-packet] - TCP header
+
+=== Other
+
+==== link:info/[Info Display]
+Informational messages and notices.
+
+* link:info/01-basic-info.mmd[01-basic-info] - Basic info
+* link:info/02-showinfo.mmd[02-showinfo] - Show info display
+
+==== link:error/[Error Display]
+Error message visualization.
+
+* link:error/01-basic-error.mmd[01-basic-error] - Basic error
+* link:error/02-error-display.mmd[02-error-display] - Detailed error
+
+== Example File Format
+
+Each example consists of:
+
+* `.mmd` file - Mermaid source code
+* `.svg` file - Rendered SVG output (generated)
+* `README.adoc` - Documentation (in subdirectory)
+
+== Contributing Examples
+
+To add a new example:
+
+1. Create `.mmd` file in appropriate subdirectory
+2. Generate SVG: `bundle exec ruby exe/sirena render FILE.mmd -o FILE.svg`
+3. Update subdirectory README.adoc
+4. Ensure example follows naming convention: `{number}-{name}.mmd`
+
+== Testing Examples
+
+Run all examples through the renderer:
+
+[source,bash]
+----
+for dir in examples/*/; do
+  for mmd in $dir*.mmd; do
+    svg="${mmd%.mmd}.svg"
+    bundle exec ruby exe/sirena render "$mmd" -o "$svg" && echo "✓ $mmd" || echo "✗ $mmd"
+  done
+done
+----
+
+== See Also
+
+* link:../README.adoc[Main Sirena Documentation]
+* link:../docs/[Additional Documentation]
+* https://mermaid.js.org/[Mermaid Official Documentation]

data/examples/README.md

@@ -0,0 +1,64 @@
+# Sirena Examples
+
+This directory contains example diagrams for all supported diagram types.
+
+## Structure
+
+Each diagram type has its own directory with:
+- `*.mmd` - Mermaid source files
+- `*.yml` - Metadata for each example
+- `generated/` - Auto-generated SVG files (git-ignored)
+
+## Usage
+
+```bash
+# Generate all SVGs
+rake examples:generate
+
+# Create a new example
+rake examples:create[flowchart,my-example]
+
+# Validate all examples
+rake examples:validate
+
+# List all examples
+rake examples:list
+
+# Build everything (generate + docs + copy)
+rake examples:build
+```
+
+## Adding Examples
+
+1. Create example files:
+   ```bash
+   rake examples:create[type,name]
+   ```
+
+2. Edit the `.mmd` and `.yml` files
+
+3. Generate SVG:
+   ```bash
+   rake examples:generate
+   ```
+
+4. Build documentation:
+   ```bash
+   rake examples:build
+   ```
+
+## Example Metadata
+
+Each `.yml` file should contain:
+
+```yaml
+title: "Example Title"
+description: "What this example demonstrates"
+complexity: basic  # basic, intermediate, advanced
+keywords:
+  - keyword1
+  - keyword2
+use_cases:
+  - "Use case description"
+theme: default  # default, dark, light, high-contrast
+```

data/examples/architecture/01-basic-services.mmd

@@ -0,0 +1,9 @@
+architecture-beta
+    service frontend(browser)[Frontend]
+    service backend(server)[Backend API]
+    service db(database)[Database]
+    service cache(disk)[Cache]
+
+    frontend L--R backend
+    backend L--R db
+    backend T--B cache

data/examples/architecture/01-basic-services.svg

@@ -0,0 +1,37 @@
+<svg
+ width="680.0"
+ height="160.0"
+ viewBox="0 0 680 160"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="edge-frontend-backend">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 160 80 L 200 80" marker-end="url(#arrowhead)"/>
+</g>
+<g id="edge-backend-db">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 320 80 L 360 80" marker-end="url(#arrowhead)"/>
+</g>
+<g id="edge-backend-cache">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 320 80 L 520 80" marker-end="url(#arrowhead)"/>
+</g>
+<g id="service-frontend">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="40.0" y="40.0" width="120.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="100.0" y="66.0" text-anchor="middle" font-size="24" dominant-baseline="middle">⊞</text>
+  <text fill="#000000" x="100.0" y="93.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Frontend</text>
+</g>
+<g id="service-backend">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="200.0" y="40.0" width="120.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="260.0" y="66.0" text-anchor="middle" font-size="24" dominant-baseline="middle">▦</text>
+  <text fill="#000000" x="260.0" y="93.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Backend API</text>
+</g>
+<g id="service-db">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="360.0" y="40.0" width="120.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="420.0" y="66.0" text-anchor="middle" font-size="24" dominant-baseline="middle">⬢</text>
+  <text fill="#000000" x="420.0" y="93.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Database</text>
+</g>
+<g id="service-cache">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="520.0" y="40.0" width="120.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="580.0" y="66.0" text-anchor="middle" font-size="24" dominant-baseline="middle">◎</text>
+  <text fill="#000000" x="580.0" y="93.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Cache</text>
+</g>
+</svg>

data/examples/architecture/02-service-groups.mmd

@@ -0,0 +1,16 @@
+architecture-beta
+    group api(cloud)[API Services]
+    
+    service webapp(server)[Web Server] in api
+    service auth(server)[Auth Service] in api
+    service data(database)[Data API] in api
+    
+    group storage(disk)[Storage Layer]
+    
+    service db(database)[Database] in storage
+    service cache(server)[Cache] in storage
+    
+    webapp:R --> L:auth
+    webapp:B --> T:data
+    data:B --> T:db
+    auth:B --> T:cache

data/examples/architecture/02-service-groups.svg

@@ -0,0 +1,55 @@
+<svg
+ width="554.0"
+ height="350.0"
+ viewBox="0 0 554.0 350"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="group-api">
+  <rect fill="#f0f0f0" fill-opacity="0.3" stroke="#999" stroke-width="2" x="10.0" y="10.0" width="504.0" height="300.0" rx="8.0" ry="8.0" stroke-dasharray="5,5" fill-opacity="0.3"/>
+  <text fill="#333" x="20.0" y="30.0" font-size="14" font-weight="bold">API Services</text>
+  <text fill="#666" x="484.0" y="35.0" font-size="20">☁</text>
+</g>
+<g id="group-storage">
+  <rect fill="#f0f0f0" fill-opacity="0.3" stroke="#999" stroke-width="2" x="10.0" y="10.0" width="340.0" height="140.0" rx="8.0" ry="8.0" stroke-dasharray="5,5" fill-opacity="0.3"/>
+  <text fill="#333" x="20.0" y="30.0" font-size="14" font-weight="bold">Storage Layer</text>
+  <text fill="#666" x="320.0" y="35.0" font-size="20">◎</text>
+</g>
+<g id="edge-webapp-auth">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 160 80 L 200 240" marker-end="url(#arrowhead)"/>
+</g>
+<g id="edge-webapp-data">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 100 120 L 424.0 200" marker-end="url(#arrowhead)"/>
+</g>
+<g id="edge-data-db">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 424.0 280 L 100 40" marker-end="url(#arrowhead)"/>
+</g>
+<g id="edge-auth-cache">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 262.0 280 L 260 40" marker-end="url(#arrowhead)"/>
+</g>
+<g id="service-webapp">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="40.0" y="40.0" width="120.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="100.0" y="66.0" text-anchor="middle" font-size="24" dominant-baseline="middle">▦</text>
+  <text fill="#000000" x="100.0" y="93.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Web Server</text>
+</g>
+<g id="service-auth">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="200.0" y="200.0" width="124.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="262.0" y="226.0" text-anchor="middle" font-size="24" dominant-baseline="middle">▦</text>
+  <text fill="#000000" x="262.0" y="253.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Auth Service</text>
+</g>
+<g id="service-data">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="364.0" y="200.0" width="120.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="424.0" y="226.0" text-anchor="middle" font-size="24" dominant-baseline="middle">⬢</text>
+  <text fill="#000000" x="424.0" y="253.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Data API</text>
+</g>
+<g id="service-db">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="40.0" y="40.0" width="120.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="100.0" y="66.0" text-anchor="middle" font-size="24" dominant-baseline="middle">⬢</text>
+  <text fill="#000000" x="100.0" y="93.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Database</text>
+</g>
+<g id="service-cache">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="200.0" y="40.0" width="120.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#666" x="260.0" y="66.0" text-anchor="middle" font-size="24" dominant-baseline="middle">▦</text>
+  <text fill="#000000" x="260.0" y="93.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" dominant-baseline="middle">Cache</text>
+</g>
+</svg>

data/examples/architecture/README.adoc

@@ -0,0 +1,79 @@
+= Architecture Diagram Examples
+
+== Purpose
+
+Architecture diagrams visualize system architecture, showing services, components, and their relationships in distributed systems.
+
+== When to Use
+
+* Microservices architecture documentation
+* Service mesh visualization
+* Cloud infrastructure diagrams
+* System component relationships
+* Deployment architecture
+
+== Syntax Overview
+
+[source,mermaid]
+----
+architecture-beta
+    service api(server)[API]
+    service db(database)[Database]
+    
+    api:R --> L:db
+----
+
+== Examples
+
+=== 01: Basic Services
+
+Demonstrates basic architecture with services and connections.
+
+**File**: link:01-basic-services.mmd[01-basic-services.mmd]
+
+[source,mermaid]
+----
+include::01-basic-services.mmd[]
+----
+
+image::01-basic-services.svg[]
+
+=== 02: Service Groups
+
+Showcases grouped services and complex relationships.
+
+**File**: link:02-service-groups.mmd[02-service-groups.mmd]
+
+[source,mermaid]
+----
+include::02-service-groups.mmd[]
+----
+
+image::02-service-groups.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Service definitions
+| 01, 02
+
+| Service connections
+| 01, 02
+
+| Service grouping
+| 02
+
+| Icon types
+| 01, 02
+
+| Directional connections
+| 01, 02
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://mermaid.js.org/syntax/architecture.html[Mermaid Architecture Documentation]

data/examples/block/01-basic-blocks.mmd

@@ -0,0 +1,13 @@
+block-beta
+    columns 3
+    Frontend["Frontend App"]
+    Backend["Backend API"]
+    Database["Database"]
+    space
+    Cache["Redis Cache"]
+    Queue["Message Queue"]
+
+    Frontend --> Backend
+    Backend --> Database
+    Backend --> Cache
+    Backend --> Queue

data/examples/block/01-basic-blocks.svg

@@ -0,0 +1,44 @@
+<svg
+ width="494.0"
+ height="180.0"
+ viewBox="0 0 494.0 180"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="connection-Frontend-Backend">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 89.0 80 L 243.5 20"/>
+  <polygon fill="#000000" points="243.5,20 237.23718018105308,27.795966130981185 233.61708537405374,18.47422200295791"/>
+</g>
+<g id="connection-Backend-Database">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 243.5 80 L 384.0 20"/>
+  <polygon fill="#000000" points="384.0,20 377.99924907456574,27.99943675085313 374.0719090950772,18.802915632217506"/>
+</g>
+<g id="connection-Backend-Cache">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 243.5 80 L 243.5 100"/>
+  <polygon fill="#000000" points="243.5,100 238.5,91.33974596215562 248.5,91.33974596215562"/>
+</g>
+<g id="connection-Backend-Queue">
+  <path fill="none" stroke="#000000" stroke-width="2.0" d="M 243.5 80 L 401.5 100"/>
+  <polygon fill="#000000" points="401.5,100 392.2804041676987,103.87286104695387 393.5362060318601,93.95202632007889"/>
+</g>
+<g id="block-Frontend">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="20.0" y="20.0" width="138.0" height="60.0"/>
+  <text fill="#000000" x="89.0" y="50.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">"Frontend App"</text>
+</g>
+<g id="block-Backend">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="178.0" y="20.0" width="131.0" height="60.0"/>
+  <text fill="#000000" x="243.5" y="50.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">"Backend API"</text>
+</g>
+<g id="block-Database">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="329.0" y="20.0" width="110.0" height="60.0"/>
+  <text fill="#000000" x="384.0" y="50.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">"Database"</text>
+</g>
+<g id="block-Cache">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="178.0" y="100.0" width="131.0" height="60.0"/>
+  <text fill="#000000" x="243.5" y="130.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">"Redis Cache"</text>
+</g>
+<g id="block-Queue">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="329.0" y="100.0" width="145.0" height="60.0"/>
+  <text fill="#000000" x="401.5" y="130.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">"Message Queue"</text>
+</g>
+</svg>

data/examples/block/02-block-shapes.mmd

@@ -0,0 +1,13 @@
+block-beta
+  columns 3
+  db(("Database"))
+  blockArrowId<["Arrow"]>(down)
+  blockArrowId2<["Arrow"]>(up)
+  A["Rectangle"]
+  B["Wide Block"]:2
+  C["Another"]
+  block:compound
+    D
+    E
+  end
+  F

data/examples/block/02-block-shapes.svg

@@ -0,0 +1,47 @@
+<svg
+ width="393.0"
+ height="400.0"
+ viewBox="0 0 393.0 400"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="block-db">
+  <circle fill="#ffffff" stroke="#000000" stroke-width="2.0" cx="70.0" cy="50.0" r="30.0"/>
+  <text fill="#000000" x="70.0" y="50.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">Database</text>
+</g>
+<g id="block-blockArrowId">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="140.0" y="20.0" width="50.0" height="30.0"/>
+  <text fill="#000000" x="165.0" y="35.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">"Arrow"</text>
+</g>
+<g id="block-blockArrowId2">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="210.0" y="20.0" width="50.0" height="30.0"/>
+  <text fill="#000000" x="235.0" y="35.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">"Arrow"</text>
+</g>
+<g id="block-A">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="20.0" y="100.0" width="103.0" height="60.0"/>
+  <text fill="#000000" x="71.5" y="130.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">Rectangle</text>
+</g>
+<g id="block-B">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="143.0" y="100.0" width="220.0" height="60.0"/>
+  <text fill="#000000" x="253.0" y="130.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">Wide Block</text>
+</g>
+<g id="block-C">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="20.0" y="180.0" width="100.0" height="60.0"/>
+  <text fill="#000000" x="70.0" y="210.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">Another</text>
+</g>
+<g id="block-compound">
+  <rect fill="none" stroke="#666" stroke-width="2" x="143.0" y="180.0" width="100.0" height="200.0" stroke-dasharray="5,5"/>
+  <g id="block-D">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="163.0" y="200.0" width="100.0" height="60.0"/>
+  <text fill="#000000" x="213.0" y="230.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">D</text>
+</g>
+  <g id="block-E">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="163.0" y="280.0" width="100.0" height="60.0"/>
+  <text fill="#000000" x="213.0" y="310.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">E</text>
+</g>
+</g>
+<g id="block-F">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2.0" x="273.0" y="180.0" width="100.0" height="60.0"/>
+  <text fill="#000000" x="323.0" y="210.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14.0" dominant-baseline="middle">F</text>
+</g>
+</svg>