sirena 0.1.0

data/examples/block/README.adoc

@@ -0,0 +1,85 @@
+= Block Diagram Examples
+
+== Purpose
+
+Block diagrams provide a flexible way to visualize system components and their relationships using a column-based layout. They are ideal for showing architectural overviews, data flows, and component interactions with spatial organization.
+
+== When to Use
+
+* System architecture and component layout
+* Data flow and pipeline visualization
+* Infrastructure and deployment diagrams
+* Microservices architecture overview
+* Multi-tier application structure
+
+== Syntax Overview
+
+[source,mermaid]
+----
+block-beta
+    columns 3
+    
+    Frontend["Frontend"]
+    Backend["Backend"]
+    Database["Database"]
+    
+    Frontend --> Backend
+    Backend --> Database
+----
+
+**Layout**: `columns N` - Define column-based grid layout
+
+**Block Types**:
+- `Label["Text"]` - Basic block
+- `Label(("Text"))` - Circle block
+- `Label{{"Text"}}` - Hexagon block
+- `Label[["Text"]]` - Subroutine block
+- `space` - Empty cell
+
+**Connections**:
+- `-->` - Arrow connection between blocks
+- Multi-line connections for complex flows
+
+**Compound Blocks**: Group related blocks together
+
+== Examples
+
+=== 01: Basic Blocks
+
+Demonstrates a simple architecture layout with frontend, backend, database, cache, and message queue components connected in a column-based grid.
+
+**File**: link:01-basic-blocks.mmd[01-basic-blocks.mmd]
+
+[source,mermaid]
+----
+include::01-basic-blocks.mmd[]
+----
+
+image::01-basic-blocks.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Column-based layout
+| 01
+
+| Basic blocks
+| 01
+
+| Block connections
+| 01
+
+| Space elements
+| 01
+
+| Multi-component architecture
+| 01
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://mermaid.js.org/syntax/block.html[Mermaid Block Diagram Documentation]

data/examples/c4/01-context-diagram.mmd

@@ -0,0 +1,10 @@
+C4Context
+    title System Context Diagram
+    Person(user, "User", "A system user")
+    System(webapp, "Web Application", "Main application")
+    System_Ext(email, "Email System", "Sends notifications")
+    SystemDb(db, "Database", "Stores user data")
+
+    Rel(user, webapp, "Uses")
+    Rel(webapp, email, "Sends emails")
+    Rel(webapp, db, "Reads/Writes")

data/examples/c4/01-context-diagram.svg

@@ -0,0 +1,45 @@
+<svg
+ width="790.0"
+ height="450.0"
+ viewBox="0 0 790 450"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="rel_0">
+  <line stroke="#707070" stroke-width="2" x1="120.0" y1="140.0" x2="372.0" y2="110.0"/>
+  <polygon fill="#707070" stroke="#707070" points="380,110 372,106 372,114"/>
+  <text fill="#000000" x="250.0" y="110.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Uses</text>
+</g>
+<g id="rel_1">
+  <line stroke="#707070" stroke-width="2" x1="380.0" y1="110.0" x2="622.0" y2="110.0"/>
+  <polygon fill="#707070" stroke="#707070" points="630,110 622,106 622,114"/>
+  <text fill="#000000" x="505.0" y="95.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Sends emails</text>
+</g>
+<g id="rel_2">
+  <line stroke="#707070" stroke-width="2" x1="380.0" y1="110.0" x2="122.0" y2="310.0"/>
+  <polygon fill="#707070" stroke="#707070" points="130,310 138,306 138,314"/>
+  <text fill="#000000" x="255.0" y="195.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Reads/Writes</text>
+</g>
+<g id="element-user">
+  <rect fill="#08427B" stroke="#073B6F" stroke-width="2" x="50.0" y="50.0" width="140.0" height="180.0" rx="10.0" ry="10.0"/>
+  <circle fill="#FFFFFF" cx="120.0" cy="80.0" r="16.0"/>
+  <ellipse fill="#FFFFFF"/>
+  <text fill="#FFFFFF" x="120.0" y="145.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">User</text>
+  <text fill="#FFFFFF" x="120.0" y="161.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">A system user</text>
+</g>
+<g id="element-webapp">
+  <rect fill="#1168BD" stroke="#0B4884" stroke-width="2" x="300.0" y="50.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="380.0" y="70.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Web Application</text>
+  <text fill="#FFFFFF" x="380.0" y="86.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">Main application</text>
+</g>
+<g id="element-email">
+  <rect fill="#1168BD" stroke="#0B4884" stroke-width="2" x="550.0" y="50.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="630.0" y="70.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Email System</text>
+  <text fill="#FFFFFF" x="630.0" y="86.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">Sends notifications</text>
+</g>
+<g id="element-db">
+  <rect fill="#1168BD" stroke="#0B4884" stroke-width="2" x="50.0" y="250.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="130.0" y="270.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Database</text>
+  <text fill="#FFFFFF" x="130.0" y="286.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">Stores user data</text>
+</g>
+</svg>

data/examples/c4/02-container-diagram.mmd

@@ -0,0 +1,24 @@
+C4Container
+    title Container Diagram - E-commerce System
+
+    Person(customer, "Customer", "Online shopper")
+    
+    System_Boundary(ecommerce, "E-commerce System") {
+        Container(webapp, "Web Application", "React", "Provides UI")
+        Container(api, "API Gateway", "Node.js", "Routes requests")
+        Container(order, "Order Service", "Java", "Handles orders")
+        Container(payment, "Payment Service", "Python", "Processes payments")
+        ContainerDb(db, "Database", "PostgreSQL", "Stores data")
+        Container(cache, "Cache", "Redis", "Session storage")
+    }
+    
+    System_Ext(paymentGW, "Payment Gateway", "External payment processor")
+    
+    Rel(customer, webapp, "Uses", "HTTPS")
+    Rel(webapp, api, "Calls", "REST/JSON")
+    Rel(api, order, "Routes to")
+    Rel(api, payment, "Routes to")
+    Rel(order, db, "Reads/Writes", "SQL")
+    Rel(payment, db, "Reads/Writes", "SQL")
+    Rel(webapp, cache, "Stores sessions")
+    Rel(payment, paymentGW, "Processes via", "HTTPS")

data/examples/c4/02-container-diagram.svg

@@ -0,0 +1,105 @@
+<svg
+ width="930.0"
+ height="660.0"
+ viewBox="0 0 930 660"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="boundary-ecommerce">
+  <rect fill="#FFFFFF" stroke="#9BA7B4" stroke-width="2" x="50.0" y="50.0" width="800.0" height="530.0" rx="8.0" ry="8.0" stroke-dasharray="10,5"/>
+  <text fill="#000000" x="60.0" y="70.0" font-family="Arial, sans-serif" font-size="16" font-weight="bold">E-commerce System</text>
+</g>
+<g id="rel_0">
+  <line stroke="#707070" stroke-width="2" x1="370.0" y1="140.0" x2="122.0" y2="110.0"/>
+  <polygon fill="#707070" stroke="#707070" points="130,110 138,106 138,114"/>
+  <text fill="#000000" x="250.0" y="110.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Uses</text>
+  <text fill="#000000" x="250.0" y="124.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10">[HTTPS]</text>
+</g>
+<g id="rel_1">
+  <line stroke="#707070" stroke-width="2" x1="130.0" y1="110.0" x2="372.0" y2="110.0"/>
+  <polygon fill="#707070" stroke="#707070" points="380,110 372,106 372,114"/>
+  <text fill="#000000" x="255.0" y="95.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Calls</text>
+  <text fill="#000000" x="255.0" y="109.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10">[REST/JSON]</text>
+</g>
+<g id="rel_2">
+  <line stroke="#707070" stroke-width="2" x1="380.0" y1="110.0" x2="622.0" y2="110.0"/>
+  <polygon fill="#707070" stroke="#707070" points="630,110 622,106 622,114"/>
+  <text fill="#000000" x="505.0" y="95.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Routes to</text>
+</g>
+<g id="rel_3">
+  <line stroke="#707070" stroke-width="2" x1="380.0" y1="110.0" x2="122.0" y2="310.0"/>
+  <polygon fill="#707070" stroke="#707070" points="130,310 138,306 138,314"/>
+  <text fill="#000000" x="255.0" y="195.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Routes to</text>
+</g>
+<g id="rel_4">
+  <line stroke="#707070" stroke-width="2" x1="630.0" y1="110.0" x2="372.0" y2="310.0"/>
+  <polygon fill="#707070" stroke="#707070" points="380,310 388,306 388,314"/>
+  <text fill="#000000" x="505.0" y="195.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Reads/Writes</text>
+  <text fill="#000000" x="505.0" y="209.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10">[SQL]</text>
+</g>
+<g id="rel_5">
+  <line stroke="#707070" stroke-width="2" x1="130.0" y1="310.0" x2="372.0" y2="310.0"/>
+  <polygon fill="#707070" stroke="#707070" points="380,310 372,306 372,314"/>
+  <text fill="#000000" x="255.0" y="295.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Reads/Writes</text>
+  <text fill="#000000" x="255.0" y="309.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10">[SQL]</text>
+</g>
+<g id="rel_6">
+  <line stroke="#707070" stroke-width="2" x1="130.0" y1="110.0" x2="622.0" y2="310.0"/>
+  <polygon fill="#707070" stroke="#707070" points="630,310 622,306 622,314"/>
+  <text fill="#000000" x="380.0" y="195.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Stores sessions</text>
+</g>
+<g id="rel_7">
+  <line stroke="#707070" stroke-width="2" x1="130.0" y1="310.0" x2="622.0" y2="110.0"/>
+  <polygon fill="#707070" stroke="#707070" points="630,110 622,106 622,114"/>
+  <text fill="#000000" x="380.0" y="195.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="12">Processes via</text>
+  <text fill="#000000" x="380.0" y="209.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10">[HTTPS]</text>
+</g>
+<g id="element-webapp">
+  <rect fill="#438DD5" stroke="#2E6295" stroke-width="2" x="50.0" y="50.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="130.0" y="70.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Web Application</text>
+  <text fill="#FFFFFF" x="130.0" y="86.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">React</text>
+  <text fill="#FFFFFF" x="130.0" y="102.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="normal" font-style="italic">[Provides UI]</text>
+</g>
+<g id="element-api">
+  <rect fill="#438DD5" stroke="#2E6295" stroke-width="2" x="300.0" y="50.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="380.0" y="70.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">API Gateway</text>
+  <text fill="#FFFFFF" x="380.0" y="86.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">Node.js</text>
+  <text fill="#FFFFFF" x="380.0" y="102.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="normal" font-style="italic">[Routes requests]</text>
+</g>
+<g id="element-order">
+  <rect fill="#438DD5" stroke="#2E6295" stroke-width="2" x="550.0" y="50.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="630.0" y="70.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Order Service</text>
+  <text fill="#FFFFFF" x="630.0" y="86.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">Java</text>
+  <text fill="#FFFFFF" x="630.0" y="102.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="normal" font-style="italic">[Handles orders]</text>
+</g>
+<g id="element-payment">
+  <rect fill="#438DD5" stroke="#2E6295" stroke-width="2" x="50.0" y="250.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="130.0" y="270.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Payment Service</text>
+  <text fill="#FFFFFF" x="130.0" y="286.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">Python</text>
+  <text fill="#FFFFFF" x="130.0" y="302.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="normal" font-style="italic">[Processes payments]</text>
+</g>
+<g id="element-db">
+  <rect fill="#438DD5" stroke="#2E6295" stroke-width="2" x="300.0" y="250.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="380.0" y="270.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Database</text>
+  <text fill="#FFFFFF" x="380.0" y="286.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">PostgreSQL</text>
+  <text fill="#FFFFFF" x="380.0" y="302.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="normal" font-style="italic">[Stores data]</text>
+</g>
+<g id="element-cache">
+  <rect fill="#438DD5" stroke="#2E6295" stroke-width="2" x="550.0" y="250.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="630.0" y="270.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Cache</text>
+  <text fill="#FFFFFF" x="630.0" y="286.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">Redis</text>
+  <text fill="#FFFFFF" x="630.0" y="302.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="normal" font-style="italic">[Session storage]</text>
+</g>
+<g id="element-customer">
+  <rect fill="#08427B" stroke="#073B6F" stroke-width="2" x="300.0" y="50.0" width="140.0" height="180.0" rx="10.0" ry="10.0"/>
+  <circle fill="#FFFFFF" cx="370.0" cy="80.0" r="16.0"/>
+  <ellipse fill="#FFFFFF"/>
+  <text fill="#FFFFFF" x="370.0" y="145.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Customer</text>
+  <text fill="#FFFFFF" x="370.0" y="161.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">Online shopper</text>
+</g>
+<g id="element-paymentGW">
+  <rect fill="#8F8F8F" stroke="#6B6B6B" stroke-width="2" x="550.0" y="50.0" width="160.0" height="120.0" rx="5.0" ry="5.0"/>
+  <text fill="#FFFFFF" x="630.0" y="70.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" font-style="normal">Payment Gateway</text>
+  <text fill="#FFFFFF" x="630.0" y="86.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="normal" font-style="normal">External payment processor</text>
+</g>
+</svg>

data/examples/c4/README.adoc

@@ -0,0 +1,92 @@
+= C4 Diagram Examples
+
+== Purpose
+
+C4 diagrams provide a hierarchical approach to software architecture visualization through four levels: Context, Container, Component, and Code. They help communicate system architecture to different audiences with varying levels of technical detail.
+
+== When to Use
+
+* Software system architecture documentation
+* Microservices and distributed system design
+* System context and external dependencies
+* Container-level deployment architecture
+* Component-level internal structure
+
+== Syntax Overview
+
+[source,mermaid]
+----
+C4Context
+    title System Context
+    
+    Person(user, "User", "System user")
+    System(app, "Application", "Main system")
+    System_Ext(ext, "External", "External system")
+    
+    Rel(user, app, "Uses")
+    Rel(app, ext, "Calls")
+----
+
+**Element Types**:
+- `Person(id, label, descr)` - User/actor
+- `System(id, label, descr)` - Internal system
+- `System_Ext(id, label, descr)` - External system
+- `SystemDb(id, label, descr)` - Database
+- `Container(id, label, tech, descr)` - Container
+- `Component(id, label, tech, descr)` - Component
+
+**Relationships**:
+- `Rel(from, to, label)` - Basic relationship
+- `Rel(from, to, label, tech)` - With technology
+- `BiRel()` - Bidirectional relationship
+
+**Boundaries**:
+- `Boundary(id, label)` - Group elements
+- `System_Boundary()` - System boundary
+- `Enterprise_Boundary()` - Enterprise boundary
+
+== Examples
+
+=== 01: Context Diagram
+
+Demonstrates a system context view showing users, the main application, and external dependencies with their relationships.
+
+**File**: link:01-context-diagram.mmd[01-context-diagram.mmd]
+
+[source,mermaid]
+----
+include::01-context-diagram.mmd[]
+----
+
+image::01-context-diagram.svg[]
+
+== Features Demonstrated
+
+[%header,cols="1,1"]
+|===
+| Feature | Example
+
+| Person/User definition
+| 01
+
+| System definition
+| 01
+
+| External systems
+| 01
+
+| Database systems
+| 01
+
+| Basic relationships
+| 01
+
+| Diagram titles
+| 01
+|===
+
+== Additional Resources
+
+* link:../../README.adoc[Main Documentation]
+* https://c4model.com/[C4 Model Official Site]
+* https://mermaid.js.org/syntax/c4.html[Mermaid C4 Diagram Documentation]

data/examples/class_diagram/01-basic-classes.mmd

@@ -0,0 +1,61 @@
+classDiagram
+    class Animal {
+        +String name
+        +int age
+        +String species
+        +makeSound() void
+        +eat(food Food) void
+        +sleep() void
+    }
+
+    class Mammal {
+        +String furColor
+        +bool warmBlooded
+        +giveBirth() void
+    }
+
+    class Bird {
+        +bool canFly
+        +String featherColor
+        +layEggs() void
+    }
+
+    class Dog {
+        +String breed
+        +bark() void
+        +fetch(item Item) void
+    }
+
+    class Cat {
+        +bool indoor
+        +int lives
+        +meow() void
+        +purr() void
+    }
+
+    class Eagle {
+        +float wingSpan
+        +hunt() void
+        +soar() void
+    }
+
+    class Penguin {
+        +swim() void
+        +slide() void
+    }
+
+    Animal <|-- Mammal
+    Animal <|-- Bird
+    Mammal <|-- Dog
+    Mammal <|-- Cat
+    Bird <|-- Eagle
+    Bird <|-- Penguin
+
+    class Owner {
+        +String name
+        +String address
+        +List~Animal~ pets
+        +adoptPet(pet Animal) void
+    }
+
+    Owner "1" --> "*" Animal : owns

data/examples/class_diagram/01-basic-classes.svg

@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+ width="247.0"
+ height="244.0"
+ viewBox="0 0 247.0 244"
+ version="1.2"
+ xmlns="http://www.w3.org/2000/svg"
+>
+<g id="defs"/>
+<g id="rel-Mammal_to_Animal">
+  <line stroke="#000000" stroke-width="2"/>
+  <polygon fill="#000000" stroke="#000000" stroke-width="2" points="70,0 65.0,8.660254037844387 75.0,8.660254037844387"/>
+</g>
+<g id="rel-Bird_to_Animal">
+  <line stroke="#000000" stroke-width="2"/>
+  <polygon fill="#000000" stroke="#000000" stroke-width="2" points="70,0 65.0,8.660254037844387 75.0,8.660254037844387"/>
+</g>
+<g id="rel-Dog_to_Mammal">
+  <line stroke="#000000" stroke-width="2"/>
+  <polygon fill="#000000" stroke="#000000" stroke-width="2" points="70,52 61.33974596215561,47.0 61.33974596215561,57.0"/>
+</g>
+<g id="rel-Cat_to_Mammal">
+  <line stroke="#000000" stroke-width="2"/>
+  <polygon fill="#000000" stroke="#000000" stroke-width="2" points="70,104 75.0,95.33974596215562 65.0,95.33974596215562"/>
+</g>
+<g id="rel-Eagle_to_Bird">
+  <line stroke="#000000" stroke-width="2"/>
+  <polygon fill="#000000" stroke="#000000" stroke-width="2" points="70,52 61.33974596215561,47.0 61.33974596215561,57.0"/>
+</g>
+<g id="rel-Penguin_to_Bird">
+  <line stroke="#000000" stroke-width="2"/>
+  <polygon fill="#000000" stroke="#000000" stroke-width="2" points="70,0 65.0,8.660254037844387 75.0,8.660254037844387"/>
+</g>
+<g id="rel-Owner_to_Animal">
+  <line stroke="#000000" stroke-width="2"/>
+  <text fill="#000000" x="70.0" y="77.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="11">owns</text>
+  <text fill="#000000" x="5.0" y="77.0" font-family="Arial, sans-serif" font-size="10">1</text>
+  <text fill="#000000" x="135.0" y="77.0" text-anchor="end" font-family="Arial, sans-serif" font-size="10">*</text>
+</g>
+<g id="class-Animal">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2" x="0.0" y="0.0" width="140.0" height="164.0" rx="3.0" ry="3.0"/>
+  <text fill="#000000" x="70.0" y="10.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Animal</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="43.0" font-family="monospace" font-size="12">+ String</text>
+  <text fill="#000000" x="10.0" y="61.0" font-family="monospace" font-size="12">+ int</text>
+  <text fill="#000000" x="10.0" y="79.0" font-family="monospace" font-size="12">+ String</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="112.0" font-family="monospace" font-size="12">+ makeSound()</text>
+  <text fill="#000000" x="10.0" y="130.0" font-family="monospace" font-size="12">+ eat(foodFood)</text>
+  <text fill="#000000" x="10.0" y="148.0" font-family="monospace" font-size="12">+ sleep()</text>
+</g>
+<g id="class-Mammal">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2" x="0.0" y="0.0" width="140.0" height="104.0" rx="3.0" ry="3.0"/>
+  <text fill="#000000" x="70.0" y="10.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Mammal</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="43.0" font-family="monospace" font-size="12">+ String</text>
+  <text fill="#000000" x="10.0" y="61.0" font-family="monospace" font-size="12">+ bool</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="94.0" font-family="monospace" font-size="12">+ giveBirth()</text>
+</g>
+<g id="class-Bird">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2" x="0.0" y="0.0" width="140.0" height="104.0" rx="3.0" ry="3.0"/>
+  <text fill="#000000" x="70.0" y="10.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Bird</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="43.0" font-family="monospace" font-size="12">+ bool</text>
+  <text fill="#000000" x="10.0" y="61.0" font-family="monospace" font-size="12">+ String</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="94.0" font-family="monospace" font-size="12">+ layEggs()</text>
+</g>
+<g id="class-Dog">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2" x="0.0" y="0.0" width="140.0" height="104.0" rx="3.0" ry="3.0"/>
+  <text fill="#000000" x="70.0" y="10.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Dog</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="43.0" font-family="monospace" font-size="12">+ String</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="76.0" font-family="monospace" font-size="12">+ bark()</text>
+  <text fill="#000000" x="10.0" y="94.0" font-family="monospace" font-size="12">+ fetch(itemItem)</text>
+</g>
+<g id="class-Cat">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2" x="0.0" y="0.0" width="140.0" height="124.0" rx="3.0" ry="3.0"/>
+  <text fill="#000000" x="70.0" y="10.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Cat</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="43.0" font-family="monospace" font-size="12">+ bool</text>
+  <text fill="#000000" x="10.0" y="61.0" font-family="monospace" font-size="12">+ int</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="94.0" font-family="monospace" font-size="12">+ meow()</text>
+  <text fill="#000000" x="10.0" y="112.0" font-family="monospace" font-size="12">+ purr()</text>
+</g>
+<g id="class-Eagle">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2" x="0.0" y="0.0" width="140.0" height="104.0" rx="3.0" ry="3.0"/>
+  <text fill="#000000" x="70.0" y="10.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Eagle</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="43.0" font-family="monospace" font-size="12">+ float</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="76.0" font-family="monospace" font-size="12">+ hunt()</text>
+  <text fill="#000000" x="10.0" y="94.0" font-family="monospace" font-size="12">+ soar()</text>
+</g>
+<g id="class-Penguin">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2" x="0.0" y="0.0" width="140.0" height="82.0" rx="3.0" ry="3.0"/>
+  <text fill="#000000" x="70.0" y="10.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Penguin</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="43.0" font-family="monospace" font-size="12">+ swim()</text>
+  <text fill="#000000" x="10.0" y="61.0" font-family="monospace" font-size="12">+ slide()</text>
+</g>
+<g id="class-Owner">
+  <rect fill="#ffffff" stroke="#000000" stroke-width="2" x="0.0" y="0.0" width="167.0" height="164.0" rx="3.0" ry="3.0"/>
+  <text fill="#000000" x="83.5" y="10.0" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Owner</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="43.0" font-family="monospace" font-size="12">+ String</text>
+  <text fill="#000000" x="10.0" y="61.0" font-family="monospace" font-size="12">+ String</text>
+  <text fill="#000000" x="10.0" y="79.0" font-family="monospace" font-size="12">+ List</text>
+  <text fill="#000000" x="10.0" y="97.0" font-family="monospace" font-size="12">~ Animal</text>
+  <text fill="#000000" x="10.0" y="115.0" font-family="monospace" font-size="12">~ pets</text>
+  <line stroke="#000000" stroke-width="1"/>
+  <text fill="#000000" x="10.0" y="148.0" font-family="monospace" font-size="12">+ adoptPet(petAnimal)</text>
+</g>
+</svg>

data/examples/class_diagram/02-relationships.mmd

@@ -0,0 +1,61 @@
+classDiagram
+    class Animal {
+        +String name
+        +int age
+        +String species
+        +makeSound() void
+        +eat(food Food) void
+        +sleep() void
+    }
+
+    class Mammal {
+        +String furColor
+        +bool warmBlooded
+        +giveBirth() void
+    }
+
+    class Bird {
+        +bool canFly
+        +String featherColor
+        +layEggs() void
+    }
+
+    class Dog {
+        +String breed
+        +bark() void
+        +fetch(item Item) void
+    }
+
+    class Cat {
+        +bool indoor
+        +int lives
+        +meow() void
+        +purr() void
+    }
+
+    class Eagle {
+        +float wingSpan
+        +hunt() void
+        +soar() void
+    }
+
+    class Penguin {
+        +swim() void
+        +slide() void
+    }
+
+    Animal <|-- Mammal
+    Animal <|-- Bird
+    Mammal <|-- Dog
+    Mammal <|-- Cat
+    Bird <|-- Eagle
+    Bird <|-- Penguin
+
+    class Owner {
+        +String name
+        +String address
+        +List~Animal~ pets
+        +adoptPet(pet Animal) void
+    }
+
+    Owner "1" --> "*" Animal : owns