raga-cli 0.8.0 → 0.9.0

package/bundled-skills/skills/raga-artifacts/diagrams.md

@@ -0,0 +1,641 @@
+# Diagram examples
+
+Every example renders with the Pele version raga pins. Copy the closest one, then change it. The types marked beta are Pele and Mermaid extensions that many models have not seen, so start from the example instead of from memory.
+
+Inside an artifact, put each diagram in `<pre class="mermaid">...</pre>` and escape `<`, `>`, and `&` as `&lt;`, `&gt;`, and `&amp;`.
+
+## Flowchart
+
+Keyword `flowchart LR`. Processes, decisions, pipelines. Audience: both.
+
+```mermaid
+---
+config:
+  theme: default
+  look: classic
+  layout: dagre
+---
+flowchart LR
+  subgraph Client
+    UI[Web app]
+    Cache[(Local cache)]
+  end
+  subgraph Services
+    API[API gateway]
+    Auth[Auth service]
+    Orders[Order service]
+  end
+  subgraph Storage
+    DB[(Orders DB)]
+  end
+  UI --> API
+  UI --> Cache
+  API --> Auth
+  API --> Orders
+  Orders --> DB
+  Auth -. token .-> UI
+```
+
+## Sequence
+
+Keyword `sequenceDiagram`. Requests between services or people over time. Audience: developers.
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant John
+    link Alice: Dashboard @ https://dashboard.contoso.com/alice
+    link Alice: Wiki @ https://wiki.contoso.com/alice
+    link John: Dashboard @ https://dashboard.contoso.com/john
+    link John: Wiki @ https://wiki.contoso.com/john
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
+```
+
+## Class
+
+Keyword `classDiagram`. Types, interfaces, and their relations. Audience: developers.
+
+```mermaid
+---
+config:
+  class:
+    hierarchicalNamespaces: false
+---
+classDiagram
+    namespace Earth.Volcano.Summit {
+        class Crater {
+            +erupt()
+        }
+    }
+    namespace Earth.Volcano.Slope {
+        class LavaFlow {
+            +buildLand()
+        }
+    }
+    namespace Earth {
+        class Hotspot {
+            +meltRock()
+        }
+    }
+    Hotspot --> Crater : feeds
+    Hotspot --> LavaFlow : feeds
+```
+
+## State
+
+Keyword `stateDiagram-v2`. Lifecycles and state machines. Audience: developers.
+
+```mermaid
+---
+config:
+  theme: default
+  look: classic
+  layout: dagre
+---
+stateDiagram-v2
+  [*] --> Draft
+  Draft --> Submitted : submit
+  state Review {
+    [*] --> Screening
+    Screening --> Decision
+  }
+  Submitted --> Review
+  Review --> Published : approved
+  Review --> Draft : rejected
+  Published --> [*]
+```
+
+## Entity relationship
+
+Keyword `erDiagram`. Database tables and relations. Audience: developers.
+
+```mermaid
+erDiagram
+    subgraph title1
+        CUSTOMER
+        CUSTOMER {
+            string name
+            string custNumber
+            string sector
+        }
+    end
+    subgraph title2
+        CAR ||--o{ NAMED-DRIVER : allows
+        subgraph title3
+            PERSON
+            PERSON {
+                string firstName
+                string lastName
+                int age
+            }
+        end
+    end
+```
+
+## C4
+
+Keyword `C4Context`. System context, containers, components. Audience: both.
+
+```mermaid
+C4Context
+title Checkout system context
+Person(customer, "Customer", "Buys products")
+System(shop, "Shop", "Web store")
+System_Ext(pay, "Payment provider", "Charges cards")
+Rel(customer, shop, "Places orders")
+Rel(shop, pay, "Charges", "HTTPS")
+```
+
+## Architecture
+
+Keyword `architecture-beta`. Cloud and service topology with groups and icons. Audience: both.
+
+```mermaid
+architecture-beta
+    service left_disk(disk)[Disk]
+    service top_disk(disk)[Disk]
+    service bottom_disk(disk)[Disk]
+    service top_gateway(internet)[Gateway]
+    service bottom_gateway(internet)[Gateway]
+    junction junctionCenter
+    junction junctionRight
+
+    left_disk:R -- L:junctionCenter
+    top_disk:B -- T:junctionCenter
+    bottom_disk:T -- B:junctionCenter
+    junctionCenter:R -- L:junctionRight
+    top_gateway:B -- T:junctionRight
+    bottom_gateway:T -- B:junctionRight
+```
+
+## Block
+
+Keyword `block`. Layered or grid layouts of components. Audience: developers.
+
+```mermaid
+block
+  columns 3
+  a:3
+  block:group1:2
+    columns 2
+    h i j k
+  end
+  g
+  block:group2:3
+    %% columns auto (default)
+    l m n o p q r
+  end
+```
+
+## Packet
+
+Keyword `packet`. Bit and byte layouts of protocols or file formats. Audience: developers.
+
+```mermaid
+---
+config:
+  packet:
+    showBits: true
+    bitOrder: descending
+    bitsPerRow: 16
+---
+packet
+0-7: "DATA"
+8-11: "TYPE"
+12: "EN"
+13-15: "RESERVED"
+```
+
+## Git graph
+
+Keyword `gitGraph`. Branching and release strategy. Audience: developers.
+
+```mermaid
+    gitGraph
+        commit id: "ZERO"
+        branch develop
+        branch release
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"MERGE"
+        commit id:"TWO"
+        checkout release
+        cherry-pick id:"MERGE" parent:"B"
+        commit id:"THREE"
+        checkout develop
+        commit id:"C"
+```
+
+## Agentflow
+
+Keyword `agentflow-beta`. AI agent and tool-call workflows. Audience: developers.
+
+```mermaid
+agentflow-beta TB
+  flow intake["Intake"]
+    receive["Receive request"]@{ shape: input }
+  end
+
+  flow processing["Processing"]
+    validate["Validate"]@{ shape: task }
+    enrich["Enrich"]@{ shape: task }
+    validate --> enrich
+  end
+  processing@{ view: "collapsed" }
+
+  flow output["Output"]
+    publish["Publish"]@{ shape: action }
+  end
+
+  receive --> validate
+  enrich --> publish
+```
+
+## Railroad
+
+Keyword `railroad-ebnf-beta`. Grammar and syntax rules. Audience: developers.
+
+```mermaid
+railroad-ebnf-beta
+title "Arithmetic Expression Grammar"
+
+expression = term ( ( "+" | "-" ) term )* ;
+term = factor ( ( "*" | "/" ) factor )* ;
+factor = number | "(" expression ")" ;
+number = digit+ ;
+digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" ;
+```
+
+## Event modeling
+
+Keyword `eventmodeling`. Commands, events, and views of an event-driven system. Audience: developers.
+
+```mermaid
+eventmodeling
+
+timeframe 01 ui CartUI
+timeframe 02 command AddItem
+timeframe 03 event ItemAdded
+
+resetframe 04 event External.InventoryChanged
+timeframe 05 processor InventoryProcessor
+timeframe 06 command ChangeInventory
+timeframe 07 event Cart.InventoryChanged
+```
+
+## Requirement
+
+Keyword `requirementDiagram`. Requirements and what satisfies or verifies them. Audience: both.
+
+```mermaid
+requirementDiagram
+
+direction LR
+
+requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+}
+
+element test_entity {
+    type: simulation
+}
+
+test_entity - satisfies -> test_req
+```
+
+## Gantt
+
+Keyword `gantt`. Schedules with tasks and dependencies. Audience: clients.
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    %% This is a comment
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d
+```
+
+## Timeline
+
+Keyword `timeline`. Milestones and history. Audience: clients.
+
+```mermaid
+timeline
+    title Timeline of the Hawaiian Islands
+    section Older islands
+        Kauaʻi : 5 million years old, Canyons, Sea <br>cliffs
+        Oʻahu : 3 million years old, Diamond Head, Surf breaks
+        Molokaʻi : 2 million years old, Fishponds, Tall cliffs
+    section Younger islands
+        Maui : 1 million years old, Haleakalā, Whale watching
+        Hawaiʻi : Still growing, Mauna Kea, Kīlauea
+```
+
+## Kanban
+
+Keyword `kanban`. Work status by column. Audience: clients.
+
+```mermaid
+kanban
+todo[Todo]
+  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
+```
+
+## User journey
+
+Keyword `journey`. Steps a user takes, with satisfaction scores. Audience: clients.
+
+```mermaid
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+```
+
+## Mindmap
+
+Keyword `mindmap`. Topics and ideas branching from one center. Audience: clients.
+
+```mermaid
+mindmap
+    id1["`**Pele** is the
+goddess of volcanoes
+Unicode works too: 🌋`"]
+      id2["`She lives in **the** crater of Kīlauea... a *very old story* that is still told today`"]
+      id3[Lava builds new land]
+```
+
+## Use case
+
+Keyword `usecase-beta`. Actors and what they can do. Audience: both.
+
+```mermaid
+---
+config:
+  theme: default
+  look: classic
+  layout: dagre
+---
+usecase-beta
+direction LR
+actor Customer
+actor Support
+systemBoundary Storefront
+  Browse("Browse catalog")
+  Checkout("Checkout")
+end
+systemBoundary Fulfilment
+  Track("Track delivery")
+end
+Customer --> Browse
+Customer --> Checkout
+Customer --> Track
+Support --> Track
+Checkout ..> : include Browse
+```
+
+## Swimlane
+
+Keyword `swimlane-beta`. A process split by team or role. Audience: clients.
+
+```mermaid
+swimlane-beta LR
+  subgraph Applicant
+    apply[Submit application]
+    sign[Sign agreement]
+  end
+
+  subgraph Reviewer
+    screen[Screen application]
+    decide{Approved?}
+  end
+
+  subgraph System
+    create[Create account]
+    notify[Send welcome email]
+  end
+
+  apply -->|Application received| screen
+  screen --> decide
+  decide -->|Approved| create --> notify --> sign
+  decide -->|Needs changes| apply
+```
+
+## Tree view
+
+Keyword `treeView-beta`. File trees and hierarchies. Audience: developers.
+
+```mermaid
+treeView-beta
+    my-project/
+        src/
+            App.tsx :::highlight icon(logos:react) ## main component
+            index.js ## entry point
+        .env ## environment variables
+        Dockerfile
+        package.json
+```
+
+## Pie
+
+Keyword `pie`. Parts of a whole, at most six slices. Audience: clients.
+
+```mermaid
+pie title Fish caught by the crew
+    "ʻAhi" : 386
+    "Mahimahi" : 85
+    "Ono" : 15
+```
+
+## XY chart
+
+Keyword `xychart`. Bar and line charts over a series. Audience: clients.
+
+```mermaid
+---
+config:
+    xyChart:
+        showDataLabel: true
+        showDataLabelOutsideBar: true
+---
+xychart
+    title "Animals seen in reef survey of 2025"
+    x-axis [turtles, eels, tangs, wrasses, "parrot fish", other]
+    y-axis "Number of Animals" 0 --> 30
+    bar [12,2,20,25,17,24]
+```
+
+## Quadrant chart
+
+Keyword `quadrantChart`. Two-axis prioritization, such as effort against impact. Audience: clients.
+
+```mermaid
+quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+```
+
+## Sankey
+
+Keyword `sankey`. Flows of volume, money, or traffic between stages. Audience: clients.
+
+```mermaid
+sankey
+
+%% source,target,value
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+```
+
+## Treemap
+
+Keyword `treemap-beta`. Sizes of nested parts, such as cost or code by module. Audience: both.
+
+```mermaid
+treemap-beta
+"Products"
+    "Electronics"
+        "Phones": 50
+        "Computers": 30
+        "Accessories": 20
+    "Clothing"
+        "Men's": 40
+        "Women's": 40
+```
+
+## Radar
+
+Keyword `radar-beta`. Comparing options across several criteria. Audience: clients.
+
+```mermaid
+---
+title: "Grades"
+---
+radar-beta
+  axis m["Math"], s["Science"], e["English"]
+  axis h["History"], g["Geography"], a["Art"]
+  curve a["Alice"]{85, 90, 80, 70, 75, 90}
+  curve b["Bob"]{70, 75, 85, 80, 90, 85}
+
+  max 100
+  min 0
+```
+
+## Venn
+
+Keyword `venn-beta`. Overlap between groups. Audience: clients.
+
+```mermaid
+venn-beta
+  set A["Frontend"]
+    text A1["React"]
+    text A2["Design Systems"]
+  set B["Backend"]
+    text B1["API"]
+  union A,B["Shared"]
+    text AB1["OpenAPI"]
+```
+
+## Ishikawa
+
+Keyword `ishikawa-beta`. Root causes of a problem, fishbone style. Audience: both.
+
+```mermaid
+ishikawa-beta
+    Blurry Photo
+    Process
+        Out of focus
+        Shutter speed too slow
+        Protective film not removed
+        Beautification filter applied
+    User
+        Shaky hands
+    Equipment
+        LENS
+            Inappropriate lens
+            Damaged lens
+            Dirty lens
+        SENSOR
+            Damaged sensor
+            Dirty sensor
+    Environment
+        Subject moved too quickly
+        Too dark
+```
+
+## Cynefin
+
+Keyword `cynefin-beta`. Sorting problems by how predictable they are. Audience: clients.
+
+```mermaid
+cynefin-beta
+  title Strategy Categorization
+
+  complex
+    "Market research"
+
+  complicated
+    "Competitive analysis"
+
+  clear
+    "Standard pricing"
+
+  chaotic
+    "Crisis management"
+
+  complex --> complicated : "Pattern identified"
+  complicated --> clear : "Best practice codified"
+  clear --> chaotic : "Complacency"
+  chaotic --> complex : "Stabilized"
+```
+
+## Wardley map
+
+Keyword `wardley-beta`. Strategy: components by visibility and maturity. Audience: clients.
+
+```mermaid
+wardley-beta
+title Sourcing Strategy
+
+anchor Customer [0.80, 0.95]
+component Custom App [0.45, 0.85] (build)
+component Off-the-shelf Tool [0.85, 0.65] (buy)
+component Managed Service [0.60, 0.40] (outsource)
+component Cloud Platform [0.95, 0.25] (market)
+
+Customer -> Custom App
+Custom App -> Off-the-shelf Tool
+Custom App -> Managed Service
+Off-the-shelf Tool -> Cloud Platform
+```