1import bpmn from '../../../examples/diagrams/example.bpmn?raw'2import bytefield from '../../../examples/diagrams/bytefield.bf?raw'3import d2 from '../../../examples/diagrams/connections.d2?raw'4import dbml from '../../../examples/diagrams/dbml.dbml?raw'5import diagramsnet from '../../../examples/diagrams/diagramsnet-venn.xml?raw'6import erd from '../../../examples/diagrams/schema.erd?raw'7import excalidraw from '../../../examples/diagrams/excalidraw.excalidraw?raw'8import goat from '../../../examples/diagrams/components.goat?raw'9import nomnoml from '../../../examples/diagrams/pirate.nomnoml?raw'10import nwdiag from '../../../examples/diagrams/network.diag?raw'11import packetdiag from '../../../examples/diagrams/packet.diag?raw'12import pikchr from '../../../examples/diagrams/diamond.pikchr?raw'13import rackdiag from '../../../examples/diagrams/rack.diag?raw'14import squaring from '../../../examples/diagrams/order-nine.squaring?raw'15import svgbob from '../../../examples/diagrams/cloud.bob?raw'16import symbolator from '../../../examples/diagrams/component.sv?raw'17import tikz from '../../../examples/diagrams/tikz.tex?raw'18import trn from '../../../examples/diagrams/zenith.trn?raw'19import umlet from '../../../examples/diagrams/umlet.xml?raw'20import vega from '../../../examples/diagrams/bar-chart.vega?raw'21import vegalite from '../../../examples/diagrams/discretizing-scale.vlite?raw'22import wavedrom from '../../../examples/diagrams/wavedrom.json5?raw'23import wireviz from '../../../examples/diagrams/wireviz.yaml?raw'24import { namedExample } from './example-defaults.js'25import { DEFAULT_SOURCE } from './state.js'2627const EXAMPLES = {28 // Narrative formats share one story: Alice and Bob are building Tandem, a29 // tiny shared to-do app, with help from Alice Agent and Bob Agent.30 plantuml: DEFAULT_SOURCE,31 mermaid: `flowchart LR32 Alice([Alice]) -->|describes the shared list| AliceAgent["Alice Agent"]33 AliceAgent -->|drafts the experience| Tandem["Tandem App"]34 Bob([Bob]) -->|reviews the plan| BobAgent["Bob Agent"]35 BobAgent -->|builds and tests the API| Tandem36 Tandem -->|keeps tasks in sync| Alice37 Tandem -->|keeps tasks in sync| Bob`,38 graphviz: `digraph Tandem {39 rankdir=LR40 node [shape=box, style="rounded,filled", fillcolor="#eef2ff"]41 Alice [shape=oval, fillcolor="#fef3c7"]42 Bob [shape=oval, fillcolor="#dcfce7"]43 AliceAgent [label="Alice Agent"]44 BobAgent [label="Bob Agent"]45 Tandem [label="Tandem App", fillcolor="#ddd6fe"]46 Alice -> AliceAgent [label="shares an idea"]47 AliceAgent -> Tandem [label="proposes the flow"]48 Bob -> BobAgent [label="asks for an API"]49 BobAgent -> Tandem [label="ships + tests"]50 Tandem -> { Alice Bob } [label="syncs tasks"]51}`,52 c4plantuml: `@startuml53!include <C4/C4_Context>5455Person(alice, "Alice", "Plans the product and creates shared tasks")56Person(bob, "Bob", "Builds the app and completes shared tasks")57System(aliceAgent, "Alice Agent", "Turns Alice's ideas into product flows")58System(bobAgent, "Bob Agent", "Implements and tests Bob's changes")59System(tandem, "Tandem App", "A tiny shared to-do list")6061Rel(alice, aliceAgent, "Explains what friends need")62Rel(aliceAgent, tandem, "Proposes task flows")63Rel(bob, bobAgent, "Requests implementation help")64Rel(bobAgent, tandem, "Builds and verifies")65Rel(alice, tandem, "Creates tasks")66Rel(bob, tandem, "Completes tasks")67@enduml`,68 blockdiag: `blockdiag {69 orientation = portrait70 Alice -> "Alice Agent" -> "Tandem App";71 Bob -> "Bob Agent" -> "Tandem App";72 "Tandem App" -> "Shared task list";7374 Alice [color = "#fde68a"];75 Bob [color = "#bbf7d0"];76 "Alice Agent" [color = "#bfdbfe"];77 "Bob Agent" [color = "#bfdbfe"];78 "Tandem App" [color = "#ddd6fe"];79 "Shared task list" [color = "#fecdd3"];80}`,81 seqdiag: `seqdiag {82 Alice; "Alice Agent"; "Tandem App"; "Bob Agent"; Bob;83 Alice -> "Alice Agent" [label = "Sketch our shared errands"];84 "Alice Agent" -> "Tandem App" [label = "Create task: Buy paint"];85 "Tandem App" -> "Bob Agent" [label = "Task assigned to Bob"];86 "Bob Agent" -> Bob [label = "Offer a reminder"];87 Bob -> "Tandem App" [label = "Mark task complete"];88 "Tandem App" -> Alice [label = "List synced"];89}`,90 actdiag: `actdiag {91 describe -> shape -> implement -> verify -> share9293 lane Alice {94 label = "Alice"95 describe [label = "Describe shared tasks"];96 share [label = "Try Tandem with Bob"];97 }98 lane "Alice Agent" {99 shape [label = "Shape the task flow"];100 }101 lane "Bob Agent" {102 implement [label = "Build Tandem"];103 verify [label = "Test task sync"];104 }105}`,106 structurizr: `workspace "Tandem" "Alice and Bob build a shared to-do app with their agents" {107 model {108 alice = person "Alice" "Plans Tandem and creates tasks"109 bob = person "Bob" "Builds Tandem and completes tasks"110 aliceAgent = softwareSystem "Alice Agent" "Shapes Alice's ideas into product flows"111 bobAgent = softwareSystem "Bob Agent" "Implements and tests Bob's changes"112 tandem = softwareSystem "Tandem App" "Keeps Alice and Bob's tasks in sync"113114 alice -> aliceAgent "Describes the experience"115 aliceAgent -> tandem "Proposes task flows"116 bob -> bobAgent "Requests implementation help"117 bobAgent -> tandem "Builds and tests"118 alice -> tandem "Creates tasks"119 bob -> tandem "Completes tasks"120 }121 views {122 systemLandscape "TandemLandscape" {123 include *124 autolayout lr125 }126 theme default127 }128}`,129 ditaa: `+-------------+ +-------------+130| | | |131| Alice | | Bob |132| | | |133+------+------+ +------+------+134 | product idea | implementation135 v v136+------+------+ +------+------+137| | | |138| Alice Agent | | Bob Agent |139| | | |140+------+------+ +------+------+141 | task flow | tested build142 | |143 +------------------+ +--------------+144 | |145 v v146 +------+---+------+147 | |148 | Tandem App |149 | |150 +--------+--------+151 |152 | persist and sync153 v154 +--------+--------+155 | Shared Tasks |156 | |157 +-----------------+`,158159 // Domain-specific examples stay intact so they remain useful references for160 // packet layouts, hardware, data visualization, wiring, and renderer syntax.161 d2,162 nwdiag,163 packetdiag,164 rackdiag,165 bpmn: bpmn166 .replaceAll('Examine Situation', 'Bob Agent tests Tandem')167 .replaceAll('Things OK?', 'Tests pass?')168 .replaceAll('Notification Sent', 'Alice and Bob share tasks')169 .replaceAll('Error Propagated', 'Alice Agent revises flow')170 .replaceAll('Klaus', 'Alice')171 .replaceAll('Walter', 'Bob'),172 bytefield,173 dbml,174 diagramsnet,175 erd,176 excalidraw,177 goat,178 nomnoml,179 pikchr,180 squaring,181 svgbob,182 symbolator,183 tikz,184 trn,185 umlet,186 vega,187 vegalite,188 wavedrom,189 wireviz,190}191192export function exampleFor(type) {193 return EXAMPLES[type] ?? DEFAULT_SOURCE194}195196export function exampleStateFor(type) {197 return {198 type,199 source: exampleFor(type),200 options: {},201 ...namedExample(type),202 }203}