sirena 0.1.0

data/examples/state_diagram/README.adoc

@@ -0,0 +1,90 @@
+= State Diagram Examples
+
+== Purpose
+
+State diagrams visualize the behavior of a system by showing its states and the transitions between them. They are essential for modeling state machines, workflows, and system lifecycle management.
+
+== When to Use
+
+* System state machines and lifecycle management
+* Connection and session state tracking
+* User interface state flows
+* Protocol state visualization
+* Workflow and business process states
+
+== Syntax Overview
+
+[source,mermaid]
+----
+stateDiagram-v2
+    [*] --> Idle
+    
+    Idle --> Active : start
+    Active --> Idle : stop
+    
+    state Active {
+        [*] --> Processing
+        Processing --> Complete
+    }
+    
+    Active --> [*]
+----
+
+**States**: Simple text labels or composite states with nested structure
+
+**Transitions**: Arrows with optional labels showing triggers/conditions
+
+**Special States**:
+- `[*]` - Start/end state
+- `state Name {...}` - Composite state with sub-states
+- `state "Description" as Name` - State with description
+
+**State Features**:
+- Entry/exit actions
+- Choice nodes
+- Fork/join for parallel states
+
+== Examples
+
+=== 01: Simple States
+
+Demonstrates a connection state machine with nested composite states, showing transitions, error handling, and complex state hierarchies.
+
+**File**: link:01-simple-states.mmd[01-simple-states.mmd]
+
+[source,mermaid]
+----
+include::01-simple-states.mmd[]
+----
+
+image::01-simple-states.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Basic states and transitions
+| 01
+
+| Start and end states
+| 01
+
+| Transition labels
+| 01
+
+| Composite states
+| 01
+
+| Nested state hierarchies
+| 01
+
+| Multiple transition paths
+| 01
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://mermaid.js.org/syntax/stateDiagram.html[Mermaid State Diagram Documentation]

data/examples/timeline/01-simple-timeline.mmd

@@ -0,0 +1,11 @@
+timeline
+    title History of Programming Languages
+    section Early Years
+        1957 : Fortran released
+        1972 : C language created
+    section Modern Era
+        1991 : Python released
+        1995 : Java and JavaScript released
+    section Contemporary
+        2009 : Go language released
+        2014 : Swift released

data/examples/timeline/01-simple-timeline.svg

@@ -0,0 +1,36 @@
+<svg
+ width="960.0"
+ height="440.0"
+ viewBox="0 0 960 440"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<text fill="#000000" x="480.0" y="40.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16.0" font-weight="bold">History of Programming Languages</text>
+<text fill="#4472C4" x="80.0" y="100.0" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Early Years</text>
+<rect fill="#ffffff" stroke="none" x="80.0" y="140.0" width="800.0" height="6.0" rx="3.0" ry="3.0"/>
+<circle fill="#4472C4" stroke="#000000" stroke-width="2" cx="149.56521739130434" cy="143.0" r="8.0"/>
+<text fill="#000000" x="149.56521739130434" y="175.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Fortran released</text>
+<text fill="#000000" x="149.56521739130434" y="125.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">1957</text>
+<circle fill="#4472C4" stroke="#000000" stroke-width="2" cx="323.47826086956525" cy="143.0" r="8.0"/>
+<text fill="#000000" x="323.47826086956525" y="175.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">C language created</text>
+<text fill="#000000" x="323.47826086956525" y="125.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">1972</text>
+<text fill="#000000" x="80.0" y="166.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">1951</text>
+<text fill="#000000" x="880.0" y="166.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">2020</text>
+<text fill="#000000" x="480.0" y="166.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">1986</text>
+<text fill="#ED7D31" x="80.0" y="160.0" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Modern Era</text>
+<rect fill="#ffffff" stroke="none" x="80.0" y="200.0" width="800.0" height="6.0" rx="3.0" ry="3.0"/>
+<circle fill="#ED7D31" stroke="#000000" stroke-width="2" cx="543.768115942029" cy="203.0" r="8.0"/>
+<text fill="#000000" x="543.768115942029" y="235.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Python released</text>
+<text fill="#000000" x="543.768115942029" y="185.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">1991</text>
+<circle fill="#ED7D31" stroke="#000000" stroke-width="2" cx="590.1449275362318" cy="203.0" r="8.0"/>
+<text fill="#000000" x="590.1449275362318" y="235.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Java and JavaScript released</text>
+<text fill="#000000" x="590.1449275362318" y="185.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">1995</text>
+<text fill="#A5A5A5" x="80.0" y="220.0" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Contemporary</text>
+<rect fill="#ffffff" stroke="none" x="80.0" y="260.0" width="800.0" height="6.0" rx="3.0" ry="3.0"/>
+<circle fill="#A5A5A5" stroke="#000000" stroke-width="2" cx="752.463768115942" cy="263.0" r="8.0"/>
+<text fill="#000000" x="752.463768115942" y="295.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Go language released</text>
+<text fill="#000000" x="752.463768115942" y="245.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">2009</text>
+<circle fill="#A5A5A5" stroke="#000000" stroke-width="2" cx="810.4347826086956" cy="263.0" r="8.0"/>
+<text fill="#000000" x="810.4347826086956" y="295.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">Swift released</text>
+<text fill="#000000" x="810.4347826086956" y="245.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">2014</text>
+</svg>

data/examples/timeline/02-periods.mmd

@@ -0,0 +1,15 @@
+timeline
+    title Software Development Lifecycle
+    section Planning
+        Requirements Gathering : 2 weeks
+        Design Phase : 3 weeks
+    section Development
+        Sprint 1 : 2 weeks
+        Sprint 2 : 2 weeks
+        Sprint 3 : 2 weeks
+    section Testing
+        QA Testing : 1 week
+        User Acceptance : 1 week
+    section Deployment
+        Staging : 3 days
+        Production : 2 days

data/examples/timeline/02-periods.svg

@@ -0,0 +1,47 @@
+<svg
+ width="960.0"
+ height="500.0"
+ viewBox="0 0 960 500"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<text fill="#000000" x="480.0" y="40.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16.0" font-weight="bold">Software Development Lifecycle</text>
+<text fill="#4472C4" x="80.0" y="100.0" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Planning</text>
+<rect fill="#ffffff" stroke="none" x="80.0" y="140.0" width="800.0" height="6.0" rx="3.0" ry="3.0"/>
+<circle fill="#4472C4" stroke="#000000" stroke-width="2" cx="80.0" cy="143.0" r="8.0"/>
+<text fill="#000000" x="80.0" y="175.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">2 weeks</text>
+<text fill="#000000" x="80.0" y="125.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">Requirements Gathering</text>
+<circle fill="#4472C4" stroke="#000000" stroke-width="2" cx="80.0" cy="143.0" r="8.0"/>
+<text fill="#000000" x="80.0" y="175.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">3 weeks</text>
+<text fill="#000000" x="80.0" y="125.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">Design Phase</text>
+<text fill="#000000" x="80.0" y="166.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">0</text>
+<text fill="#000000" x="880.0" y="166.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">4</text>
+<text fill="#000000" x="480.0" y="166.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">2</text>
+<text fill="#ED7D31" x="80.0" y="160.0" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Development</text>
+<rect fill="#ffffff" stroke="none" x="80.0" y="200.0" width="800.0" height="6.0" rx="3.0" ry="3.0"/>
+<circle fill="#ED7D31" stroke="#000000" stroke-width="2" cx="280.0" cy="203.0" r="8.0"/>
+<text fill="#000000" x="280.0" y="235.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">2 weeks</text>
+<text fill="#000000" x="280.0" y="185.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">Sprint 1</text>
+<circle fill="#ED7D31" stroke="#000000" stroke-width="2" cx="480.0" cy="203.0" r="8.0"/>
+<text fill="#000000" x="480.0" y="235.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">2 weeks</text>
+<text fill="#000000" x="480.0" y="185.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">Sprint 2</text>
+<circle fill="#ED7D31" stroke="#000000" stroke-width="2" cx="680.0" cy="203.0" r="8.0"/>
+<text fill="#000000" x="680.0" y="235.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">2 weeks</text>
+<text fill="#000000" x="680.0" y="185.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">Sprint 3</text>
+<text fill="#A5A5A5" x="80.0" y="220.0" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Testing</text>
+<rect fill="#ffffff" stroke="none" x="80.0" y="260.0" width="800.0" height="6.0" rx="3.0" ry="3.0"/>
+<circle fill="#A5A5A5" stroke="#000000" stroke-width="2" cx="80.0" cy="263.0" r="8.0"/>
+<text fill="#000000" x="80.0" y="295.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">1 week</text>
+<text fill="#000000" x="80.0" y="245.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">QA Testing</text>
+<circle fill="#A5A5A5" stroke="#000000" stroke-width="2" cx="80.0" cy="263.0" r="8.0"/>
+<text fill="#000000" x="80.0" y="295.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">1 week</text>
+<text fill="#000000" x="80.0" y="245.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">User Acceptance</text>
+<text fill="#FFC000" x="80.0" y="280.0" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="bold">Deployment</text>
+<rect fill="#ffffff" stroke="none" x="80.0" y="320.0" width="800.0" height="6.0" rx="3.0" ry="3.0"/>
+<circle fill="#FFC000" stroke="#000000" stroke-width="2" cx="80.0" cy="323.0" r="8.0"/>
+<text fill="#000000" x="80.0" y="355.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">3 days</text>
+<text fill="#000000" x="80.0" y="305.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">Staging</text>
+<circle fill="#FFC000" stroke="#000000" stroke-width="2" cx="80.0" cy="323.0" r="8.0"/>
+<text fill="#000000" x="80.0" y="355.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0">2 days</text>
+<text fill="#000000" x="80.0" y="305.0" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12.0" font-weight="bold">Production</text>
+</svg>

data/examples/timeline/README.adoc

@@ -0,0 +1,78 @@
+= Timeline Examples
+
+== Purpose
+
+Timeline diagrams visualize events chronologically, showing sequences of activities or milestones in temporal order.
+
+== When to Use
+
+* Project milestone visualization
+* Historical event documentation
+* Process chronology
+* Planning phase transitions
+* Event sequence mapping
+
+== Syntax Overview
+
+[source,mermaid]
+----
+timeline
+    title Project Timeline
+    section Phase 1
+        Event 1
+        Event 2
+    section Phase 2
+        Event 3
+----
+
+== Examples
+
+=== 01: Simple Timeline
+
+Demonstrates basic timeline with sequential events.
+
+**File**: link:01-simple-timeline.mmd[01-simple-timeline.mmd]
+
+[source,mermaid]
+----
+include::01-simple-timeline.mmd[]
+----
+
+image::01-simple-timeline.svg[]
+
+=== 02: Periods
+
+Showcases timeline with time periods and durations.
+
+**File**: link:02-periods.mmd[02-periods.mmd]
+
+[source,mermaid]
+----
+include::02-periods.mmd[]
+----
+
+image::02-periods.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Basic timeline
+| 01, 02
+
+| Section grouping
+| 01, 02
+
+| Event sequencing
+| 01, 02
+
+| Period visualization
+| 02
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://mermaid.js.org/syntax/timeline.html[Mermaid Timeline Documentation]

data/examples/treemap/01-basic-treemap.mmd

@@ -0,0 +1,12 @@
+treemap-beta
+  "Company Revenue"
+      "North America"
+          "US": 45000
+          "Canada": 12000
+      "Europe"
+          "UK": 28000
+          "Germany": 22000
+          "France": 18000
+      "Asia"
+          "Japan": 15000
+          "China": 35000

data/examples/treemap/01-basic-treemap.svg

@@ -0,0 +1,59 @@
+<svg
+ width="800.0"
+ height="600.0"
+ viewBox="0 0 800 600"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g>
+  <rect fill="#8dd3c7" stroke="#000000" stroke-width="2" x="10.0" y="10.0" width="780.0" height="580.0" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="15.0" y="25.0" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">Company Revenue</text>
+  <g>
+  <rect fill="#ffffb3" stroke="#000000" stroke-width="2" x="20.0" y="30.0" width="760.0" height="179.14285714285717" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="25.0" y="45.0" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">North America</text>
+  <g>
+  <rect fill="#bebada" stroke="#000000" stroke-width="2" x="30.0" y="50.0" width="740.0" height="117.74436090225566" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="35.0" y="65.0" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">US</text>
+  <text fill="#000000" x="35.0" y="80.0" font-family="Arial, Helvetica, sans-serif" font-size="10">45000</text>
+</g>
+  <g>
+  <rect fill="#bebada" stroke="#000000" stroke-width="2" x="30.0" y="177.74436090225566" width="740.0" height="40.0" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="35.0" y="192.74436090225566" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">Canada</text>
+  <text fill="#000000" x="35.0" y="207.74436090225566" font-family="Arial, Helvetica, sans-serif" font-size="10">12000</text>
+</g>
+</g>
+  <g>
+  <rect fill="#ffffb3" stroke="#000000" stroke-width="2" x="20.0" y="219.14285714285717" width="760.0" height="213.71428571428572" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="25.0" y="234.14285714285717" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">Europe</text>
+  <g>
+  <rect fill="#bebada" stroke="#000000" stroke-width="2" x="30.0" y="239.14285714285717" width="740.0" height="75.6470588235294" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="35.0" y="254.14285714285717" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">UK</text>
+  <text fill="#000000" x="35.0" y="269.14285714285717" font-family="Arial, Helvetica, sans-serif" font-size="10">28000</text>
+</g>
+  <g>
+  <rect fill="#bebada" stroke="#000000" stroke-width="2" x="30.0" y="324.78991596638656" width="740.0" height="59.43697478991597" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="35.0" y="339.78991596638656" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">Germany</text>
+  <text fill="#000000" x="35.0" y="354.78991596638656" font-family="Arial, Helvetica, sans-serif" font-size="10">22000</text>
+</g>
+  <g>
+  <rect fill="#bebada" stroke="#000000" stroke-width="2" x="30.0" y="394.2268907563025" width="740.0" height="48.63025210084034" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="35.0" y="409.2268907563025" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">France</text>
+  <text fill="#000000" x="35.0" y="424.2268907563025" font-family="Arial, Helvetica, sans-serif" font-size="10">18000</text>
+</g>
+</g>
+  <g>
+  <rect fill="#ffffb3" stroke="#000000" stroke-width="2" x="20.0" y="442.8571428571429" width="760.0" height="157.14285714285714" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="25.0" y="457.8571428571429" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">Asia</text>
+  <g>
+  <rect fill="#bebada" stroke="#000000" stroke-width="2" x="30.0" y="462.8571428571429" width="740.0" height="40.0" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="35.0" y="477.8571428571429" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">Japan</text>
+  <text fill="#000000" x="35.0" y="492.8571428571429" font-family="Arial, Helvetica, sans-serif" font-size="10">15000</text>
+</g>
+  <g>
+  <rect fill="#bebada" stroke="#000000" stroke-width="2" x="30.0" y="512.8571428571429" width="740.0" height="88.99999999999999" rx="4.0" ry="4.0"/>
+  <text fill="#000000" x="35.0" y="527.8571428571429" font-family="Arial, Helvetica, sans-serif" font-size="12" font-weight="bold">China</text>
+  <text fill="#000000" x="35.0" y="542.8571428571429" font-family="Arial, Helvetica, sans-serif" font-size="10">35000</text>
+</g>
+</g>
+</g>
+</svg>

data/examples/treemap/README.adoc

@@ -0,0 +1,59 @@
+= Treemap Diagram Examples
+
+== Purpose
+
+Treemap diagrams display hierarchical data as nested rectangles, with size representing quantitative values.
+
+== When to Use
+
+* Disk space usage visualization
+* Portfolio allocation
+* Hierarchical data proportions
+* Market share by category
+* Resource distribution trees
+
+== Syntax Overview
+
+[source,mermaid]
+----
+treemap
+    Root
+        Child1: 40
+        Child2: 60
+----
+
+== Examples
+
+=== 01: Basic Treemap
+
+Demonstrates basic treemap with hierarchical values.
+
+**File**: link:01-basic-treemap.mmd[01-basic-treemap.mmd]
+
+[source,mermaid]
+----
+include::01-basic-treemap.mmd[]
+----
+
+image::01-basic-treemap.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Hierarchical structure
+| 01
+
+| Proportional sizing
+| 01
+
+| Nested categories
+| 01
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://mermaid.js.org/syntax/treemap.html[Mermaid Treemap Documentation]

data/examples/user_journey/01-simple-journey.mmd

@@ -0,0 +1,23 @@
+journey
+    title Customer Support Interaction Journey
+    section Discovery
+      Visit help center: 3: Customer
+      Search for solution: 2: Customer
+      Click support chat: 4: Customer
+    section Initial Contact
+      Greet customer: 5: Customer, Agent
+      Describe issue: 3: Customer, Agent
+      Agent reviews account: 4: Agent, System
+    section Diagnosis
+      Agent asks clarifying questions: 4: Customer, Agent
+      Customer provides details: 3: Customer, Agent
+      Agent checks logs: 2: Agent, System
+      Agent identifies root cause: 5: Agent
+    section Resolution
+      Agent explains solution: 5: Customer, Agent
+      Customer follows steps: 4: Customer
+      Issue resolved: 5: Customer, Agent
+    section Follow-up
+      Agent confirms resolution: 5: Customer, Agent
+      Customer rates experience: 5: Customer
+      Agent documents case: 4: Agent, System

data/examples/user_journey/01-simple-journey.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="400" height="200" viewBox="0 0 400 200" version="1.2" xmlns="http://www.w3.org/2000/svg">
+  <rect x="50" y="50" width="300" height="100" fill="#f0f0f0" stroke="#000000" stroke-width="2"/>
+  <text x="200" y="100" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#000000">User Journey (parser needs fixes)</text>
+</svg>

data/examples/user_journey/02-multi-actor.mmd

@@ -0,0 +1,18 @@
+journey
+    title E-commerce Purchase Flow
+    section Browse
+        View Products: 5: Customer
+        Search Items: 4: Customer
+        Filter Results: 3: Customer
+    section Purchase
+        Add to Cart: 5: Customer
+        Verify Stock: 3: System
+        Apply Discount: 4: Customer, System
+    section Checkout
+        Enter Payment: 4: Customer
+        Process Payment: 5: Payment Gateway
+        Confirm Order: 5: Customer, System
+    section Fulfillment
+        Pack Order: 4: Warehouse
+        Ship Order: 5: Courier
+        Track Shipment: 5: Customer

data/examples/user_journey/02-multi-actor.svg

@@ -0,0 +1,129 @@
+<svg
+ width="770.0"
+ height="890.0"
+ viewBox="0 0 770 890"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<text fill="#000000" x="20.0" y="40.0" font-family="Arial, sans-serif" font-size="20" font-weight="bold">E-commerce Purchase Flow</text>
+<text fill="#666666" x="20.0" y="76.0" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Browse</text>
+<g id="task-task_0">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="50.0" y="50.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="120.0" y="74.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">View Products</text>
+  <text fill="#000000" x="120.0" y="102.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">5</text>
+  <text fill="#333333" x="120.0" y="123.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Customer</text>
+</g>
+<g id="task-task_1">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="300.0" y="50.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="370.0" y="74.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Search Items</text>
+  <text fill="#000000" x="370.0" y="102.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">4</text>
+  <text fill="#333333" x="370.0" y="123.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Customer</text>
+</g>
+<g id="task-task_2">
+  <rect fill="#feca57" stroke="#333333" stroke-width="2" x="550.0" y="50.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="620.0" y="74.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Filter Results</text>
+  <text fill="#000000" x="620.0" y="102.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">3</text>
+  <text fill="#333333" x="620.0" y="123.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Customer</text>
+</g>
+<text fill="#666666" x="20.0" y="122.0" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Purchase</text>
+<g id="task-task_3">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="50.0" y="250.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="120.0" y="274.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Add to Cart</text>
+  <text fill="#000000" x="120.0" y="302.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">5</text>
+  <text fill="#333333" x="120.0" y="323.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Customer</text>
+</g>
+<g id="task-task_4">
+  <rect fill="#feca57" stroke="#333333" stroke-width="2" x="300.0" y="250.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="370.0" y="274.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Verify Stock</text>
+  <text fill="#000000" x="370.0" y="302.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">3</text>
+  <text fill="#333333" x="370.0" y="323.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">System</text>
+</g>
+<g id="task-task_5">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="550.0" y="250.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="620.0" y="274.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Apply Discount</text>
+  <text fill="#000000" x="620.0" y="302.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">4</text>
+  <text fill="#333333" x="620.0" y="323.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Customer, System</text>
+</g>
+<text fill="#666666" x="20.0" y="168.0" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Checkout</text>
+<g id="task-task_6">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="50.0" y="450.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="120.0" y="474.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Enter Payment</text>
+  <text fill="#000000" x="120.0" y="502.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">4</text>
+  <text fill="#333333" x="120.0" y="523.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Customer</text>
+</g>
+<g id="task-task_7">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="300.0" y="450.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="370.0" y="474.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Process Payment</text>
+  <text fill="#000000" x="370.0" y="502.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">5</text>
+  <text fill="#333333" x="370.0" y="523.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Payment Gateway</text>
+</g>
+<g id="task-task_8">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="550.0" y="450.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="620.0" y="474.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Confirm Order</text>
+  <text fill="#000000" x="620.0" y="502.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">5</text>
+  <text fill="#333333" x="620.0" y="523.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Customer, System</text>
+</g>
+<text fill="#666666" x="20.0" y="214.0" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Fulfillment</text>
+<g id="task-task_9">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="50.0" y="650.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="120.0" y="674.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Pack Order</text>
+  <text fill="#000000" x="120.0" y="702.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">4</text>
+  <text fill="#333333" x="120.0" y="723.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Warehouse</text>
+</g>
+<g id="task-task_10">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="300.0" y="650.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="370.0" y="674.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Ship Order</text>
+  <text fill="#000000" x="370.0" y="702.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">5</text>
+  <text fill="#333333" x="370.0" y="723.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Courier</text>
+</g>
+<g id="task-task_11">
+  <rect fill="#48dbfb" stroke="#333333" stroke-width="2" x="550.0" y="650.0" width="140.0" height="80.0" rx="5.0" ry="5.0"/>
+  <text fill="#000000" x="620.0" y="674.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold">Track Shipment</text>
+  <text fill="#000000" x="620.0" y="702.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold">5</text>
+  <text fill="#333333" x="620.0" y="723.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">Customer</text>
+</g>
+<g id="arrow-flow_0">
+  <line stroke="#666666" stroke-width="2" x1="190.0" y1="90.0" x2="300.0" y2="90.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 300,90 L 291.33974596215563,95.0 M 300,90 L 291.33974596215563,85.0"/>
+</g>
+<g id="arrow-flow_1">
+  <line stroke="#666666" stroke-width="2" x1="440.0" y1="90.0" x2="550.0" y2="90.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 550,90 L 541.3397459621556,95.0 M 550,90 L 541.3397459621556,85.0"/>
+</g>
+<g id="arrow-flow_2">
+  <line stroke="#666666" stroke-width="2" x1="690.0" y1="90.0" x2="50.0" y2="290.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 50,290 L 56.774664118139754,282.64446289613124 M 50,290 L 59.75741404949922,292.1892626764816"/>
+</g>
+<g id="arrow-flow_3">
+  <line stroke="#666666" stroke-width="2" x1="190.0" y1="290.0" x2="300.0" y2="290.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 300,290 L 291.33974596215563,295.0 M 300,290 L 291.33974596215563,285.0"/>
+</g>
+<g id="arrow-flow_4">
+  <line stroke="#666666" stroke-width="2" x1="440.0" y1="290.0" x2="550.0" y2="290.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 550,290 L 541.3397459621556,295.0 M 550,290 L 541.3397459621556,285.0"/>
+</g>
+<g id="arrow-flow_5">
+  <line stroke="#666666" stroke-width="2" x1="690.0" y1="290.0" x2="50.0" y2="490.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 50,490 L 56.774664118139754,482.64446289613124 M 50,490 L 59.75741404949922,492.1892626764816"/>
+</g>
+<g id="arrow-flow_6">
+  <line stroke="#666666" stroke-width="2" x1="190.0" y1="490.0" x2="300.0" y2="490.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 300,490 L 291.33974596215563,495.0 M 300,490 L 291.33974596215563,485.0"/>
+</g>
+<g id="arrow-flow_7">
+  <line stroke="#666666" stroke-width="2" x1="440.0" y1="490.0" x2="550.0" y2="490.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 550,490 L 541.3397459621556,495.0 M 550,490 L 541.3397459621556,485.0"/>
+</g>
+<g id="arrow-flow_8">
+  <line stroke="#666666" stroke-width="2" x1="690.0" y1="490.0" x2="50.0" y2="690.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 50,690 L 56.774664118139754,682.6444628961312 M 50,690 L 59.75741404949922,692.1892626764816"/>
+</g>
+<g id="arrow-flow_9">
+  <line stroke="#666666" stroke-width="2" x1="190.0" y1="690.0" x2="300.0" y2="690.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 300,690 L 291.33974596215563,695.0 M 300,690 L 291.33974596215563,685.0"/>
+</g>
+<g id="arrow-flow_10">
+  <line stroke="#666666" stroke-width="2" x1="440.0" y1="690.0" x2="550.0" y2="690.0"/>
+  <path fill="none" stroke="#666666" stroke-width="2" d="M 550,690 L 541.3397459621556,695.0 M 550,690 L 541.3397459621556,685.0"/>
+</g>
+</svg>