agentic-mermaid 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (333) hide show
  1. package/CHANGELOG.md +149 -4
  2. package/LICENSES/Apache-2.0.txt +202 -0
  3. package/README.md +25 -32
  4. package/THIRD_PARTY_NOTICES.md +29 -0
  5. package/assets/fonts/FONT-LICENSES.md +9 -5
  6. package/assets/fonts/Inter-Bold.ttf +0 -0
  7. package/assets/fonts/Inter-Medium.ttf +0 -0
  8. package/assets/fonts/Inter-Regular.ttf +0 -0
  9. package/assets/fonts/Inter-SemiBold.ttf +0 -0
  10. package/dist/agent-core.d.ts +463 -0
  11. package/dist/agent-core.js +397 -0
  12. package/dist/agent.d.ts +81 -1822
  13. package/dist/agent.js +336 -36839
  14. package/dist/agentic-mermaid-mcp.js +7 -37908
  15. package/dist/am.js +33638 -36261
  16. package/dist/chunk-4QECACIA.js +4702 -0
  17. package/dist/chunk-CDPKJ2BQ.js +37 -0
  18. package/dist/chunk-QKDLMOJJ.js +3487 -0
  19. package/dist/chunk-WI35L7IR.js +615 -0
  20. package/dist/chunk-WN3YDOBG.js +149 -0
  21. package/dist/chunk-ZYMMKQ3I.js +62637 -0
  22. package/dist/index-D54dqSdC.d.ts +6777 -0
  23. package/dist/index.d.ts +1 -1
  24. package/dist/index.js +310 -32836
  25. package/dist/mcp-cli-SBQSTJFC.js +17 -0
  26. package/docs/README.md +14 -6
  27. package/docs/schemas/style-spec.schema.json +1221 -30
  28. package/examples/styles/catalog.json +54 -0
  29. package/examples/styles/cloudflare-workers-inspired-prototype.mmd +9 -0
  30. package/examples/styles/cloudflare-workers-inspired-prototype.style.json +110 -0
  31. package/examples/styles/cupertino-prototype.mmd +10 -0
  32. package/examples/styles/cupertino-prototype.style.json +63 -0
  33. package/examples/styles/mid-century-report.style.json +2 -2
  34. package/examples/styles/star-chart-atlas.style.json +2 -1
  35. package/examples/styles/transit-route-map.style.json +2 -2
  36. package/examples/styles/vercel-inspired-prototype.mmd +6 -0
  37. package/examples/styles/vercel-inspired-prototype.style.json +87 -0
  38. package/package.json +70 -43
  39. package/server.json +41 -0
  40. package/skills/agentic-mermaid-diagram-workflow/SKILL.md +17 -36
  41. package/skills/agentic-mermaid-diagram-workflow/references/cli.md +4 -5
  42. package/skills/agentic-mermaid-diagram-workflow/references/code-mode.md +15 -31
  43. package/skills/agentic-mermaid-diagram-workflow/references/sequence.md +10 -14
  44. package/skills/agentic-mermaid-live-editor/SKILL.md +100 -206
  45. package/AGENT_NATIVE.md +0 -602
  46. package/Instructions_for_agents.md +0 -83
  47. package/TODO.md +0 -662
  48. package/assets/hero.png +0 -0
  49. package/dist/index-x2Cj1dVv.d.ts +0 -1089
  50. package/docs/agent-api-cookbook.md +0 -308
  51. package/docs/agent-mutation-policy.md +0 -104
  52. package/docs/agent-workflow-examples.md +0 -46
  53. package/docs/api.md +0 -203
  54. package/docs/ascii.md +0 -103
  55. package/docs/assets/improvements/box-start-connector.png +0 -0
  56. package/docs/assets/improvements/comment-dropped-lint.png +0 -0
  57. package/docs/assets/improvements/er-content-loss.png +0 -0
  58. package/docs/assets/improvements/fan-in-trunks.png +0 -0
  59. package/docs/assets/improvements/gantt-family.png +0 -0
  60. package/docs/assets/improvements/gantt-milestone-clamp.png +0 -0
  61. package/docs/assets/improvements/gantt-verify-seam.png +0 -0
  62. package/docs/assets/improvements/subgraph-container-edges.png +0 -0
  63. package/docs/assets/improvements/wrapper-frontmatter.png +0 -0
  64. package/docs/assets/improvements/wrapper-init-directive.png +0 -0
  65. package/docs/assets/improvements/wrapper-leading-comment.png +0 -0
  66. package/docs/assets/style-cookbook/mid-century-report.png +0 -0
  67. package/docs/assets/style-cookbook/star-chart-atlas.png +0 -0
  68. package/docs/assets/style-cookbook/transit-route-map.png +0 -0
  69. package/docs/comparison.md +0 -94
  70. package/docs/config.md +0 -105
  71. package/docs/contributing/adding-diagram-types.md +0 -144
  72. package/docs/contributing/diagram-family-citizenship.matrix.json +0 -2127
  73. package/docs/contributing/diagram-family-citizenship.md +0 -82
  74. package/docs/contributing/harvesting-upstream-tests.md +0 -126
  75. package/docs/contributing/lessons-learned.md +0 -276
  76. package/docs/contributing/releasing.md +0 -71
  77. package/docs/contributing/visual-review-evidence.md +0 -53
  78. package/docs/custom-style-cookbook.md +0 -154
  79. package/docs/design/families/README.md +0 -26
  80. package/docs/design/families/architecture-beta.md +0 -48
  81. package/docs/design/families/flowchart-parser-conformance.md +0 -22
  82. package/docs/design/families/gantt-research.md +0 -137
  83. package/docs/design/families/gantt.md +0 -329
  84. package/docs/design/families/journey-agentic-cards-before.png +0 -0
  85. package/docs/design/families/journey-mermaid-classic-implementation.png +0 -0
  86. package/docs/design/families/journey-mermaid-classic-prototype.png +0 -0
  87. package/docs/design/families/journey-mermaid-classic-prototype.svg +0 -163
  88. package/docs/design/families/journey-mermaid-classic-prototype.svg.png +0 -0
  89. package/docs/design/families/journey-migration-parity.md +0 -433
  90. package/docs/design/families/journey-usage-research.md +0 -423
  91. package/docs/design/families/journey.md +0 -125
  92. package/docs/design/families/xychart.md +0 -85
  93. package/docs/design/system/README.md +0 -45
  94. package/docs/design/system/abstraction-audit.md +0 -224
  95. package/docs/design/system/abstraction-recommendations.md +0 -655
  96. package/docs/design/system/architecture.mmd +0 -29
  97. package/docs/design/system/architecture.svg +0 -137
  98. package/docs/design/system/layout-guarantees-and-robustness.md +0 -351
  99. package/docs/design/system/layout-rubric.md +0 -138
  100. package/docs/design/system/route-contracts.md +0 -848
  101. package/docs/design/system/source-preservation-ladder.md +0 -52
  102. package/docs/design/system/styles-rollout.md +0 -216
  103. package/docs/design/system/ugly-layouts.md +0 -119
  104. package/docs/diagram-families.md +0 -193
  105. package/docs/features.md +0 -147
  106. package/docs/fork-differences.md +0 -130
  107. package/docs/getting-started.md +0 -175
  108. package/docs/issue-derived-test-cases.md +0 -156
  109. package/docs/layout-characterization/README.md +0 -245
  110. package/docs/layout-characterization/contact-sheet-families.md +0 -496
  111. package/docs/layout-characterization/contact-sheet.md +0 -638
  112. package/docs/layout-characterization/properties.md +0 -281
  113. package/docs/layout-characterization/visual-quality.md +0 -160
  114. package/docs/layout-characterization/visual-snapshots/architecture.svg +0 -79
  115. package/docs/layout-characterization/visual-snapshots/class.svg +0 -60
  116. package/docs/layout-characterization/visual-snapshots/er.svg +0 -61
  117. package/docs/layout-characterization/visual-snapshots/flowchart.svg +0 -58
  118. package/docs/layout-characterization/visual-snapshots/gantt.svg +0 -52
  119. package/docs/layout-characterization/visual-snapshots/journey.svg +0 -118
  120. package/docs/layout-characterization/visual-snapshots/pie.svg +0 -36
  121. package/docs/layout-characterization/visual-snapshots/quadrant.svg +0 -47
  122. package/docs/layout-characterization/visual-snapshots/sequence.svg +0 -59
  123. package/docs/layout-characterization/visual-snapshots/state.svg +0 -52
  124. package/docs/layout-characterization/visual-snapshots/timeline.svg +0 -64
  125. package/docs/layout-characterization/visual-snapshots/xychart.svg +0 -97
  126. package/docs/mcp-code-mode-rationale.md +0 -101
  127. package/docs/mcp-http-transport.md +0 -223
  128. package/docs/mermaid-layout-complaints.md +0 -837
  129. package/docs/mutation-testing.md +0 -206
  130. package/docs/project/divergences.md +0 -98
  131. package/docs/project/dogfooding-docs-strategy.md +0 -66
  132. package/docs/project/hosted-mcp-cloudflare-plan.md +0 -338
  133. package/docs/project/lessons-learned.md +0 -1019
  134. package/docs/project/remove-role-styling-plan.md +0 -176
  135. package/docs/quality.md +0 -212
  136. package/docs/react.md +0 -97
  137. package/docs/style-authoring.md +0 -133
  138. package/docs/testing-strategy.md +0 -335
  139. package/docs/theming.md +0 -162
  140. package/examples/agent-improve-auth-flow.ts +0 -206
  141. package/examples/agent-loop.ts +0 -53
  142. package/examples/mcp-vs-cli-complex-diagrams.ts +0 -133
  143. package/llms.txt +0 -104
  144. package/skill-evals/README.md +0 -77
  145. package/skill-evals/fixtures/architecture-cache/input.mmd +0 -5
  146. package/skill-evals/fixtures/class-payment/input.mmd +0 -4
  147. package/skill-evals/fixtures/er-orders/input.mmd +0 -10
  148. package/skill-evals/fixtures/flowchart-cache/input.mmd +0 -3
  149. package/skill-evals/fixtures/gantt-release/input.mmd +0 -7
  150. package/skill-evals/fixtures/journey-checkout/input.mmd +0 -6
  151. package/skill-evals/fixtures/pie-exports/input.mmd +0 -5
  152. package/skill-evals/fixtures/quadrant-priorities/input.mmd +0 -11
  153. package/skill-evals/fixtures/sequence-retry/input.mmd +0 -8
  154. package/skill-evals/fixtures/state-lifecycle/input.mmd +0 -5
  155. package/skill-evals/fixtures/timeline-release/input.mmd +0 -6
  156. package/skill-evals/fixtures/xychart-growth/input.mmd +0 -5
  157. package/skill-evals/shared-benchmark.json +0 -510
  158. package/src/agent/analyze.ts +0 -157
  159. package/src/agent/apply.ts +0 -146
  160. package/src/agent/architecture-body.ts +0 -458
  161. package/src/agent/certificates.ts +0 -110
  162. package/src/agent/class-body.ts +0 -319
  163. package/src/agent/core.ts +0 -207
  164. package/src/agent/create.ts +0 -106
  165. package/src/agent/describe.ts +0 -364
  166. package/src/agent/er-body.ts +0 -224
  167. package/src/agent/facts.ts +0 -337
  168. package/src/agent/families-builtin.ts +0 -934
  169. package/src/agent/families.ts +0 -232
  170. package/src/agent/family-layouts.ts +0 -826
  171. package/src/agent/flowchart-body.ts +0 -372
  172. package/src/agent/flowchart-unsupported.ts +0 -243
  173. package/src/agent/gantt-body.ts +0 -495
  174. package/src/agent/index.ts +0 -10
  175. package/src/agent/journey-body.ts +0 -414
  176. package/src/agent/label-metrics.ts +0 -28
  177. package/src/agent/layout-to-rendered.ts +0 -63
  178. package/src/agent/mutate.ts +0 -97
  179. package/src/agent/mutation-ops.ts +0 -51
  180. package/src/agent/op-schema.ts +0 -439
  181. package/src/agent/parse.ts +0 -223
  182. package/src/agent/pie-body.ts +0 -270
  183. package/src/agent/png.ts +0 -117
  184. package/src/agent/quadrant-body.ts +0 -336
  185. package/src/agent/quality.ts +0 -363
  186. package/src/agent/readability-audit.ts +0 -92
  187. package/src/agent/rendered-route-audit.ts +0 -61
  188. package/src/agent/sequence-body.ts +0 -345
  189. package/src/agent/serialize.ts +0 -214
  190. package/src/agent/state-body.ts +0 -589
  191. package/src/agent/structural-count.ts +0 -150
  192. package/src/agent/timeline-body.ts +0 -280
  193. package/src/agent/trace-log.ts +0 -43
  194. package/src/agent/types.ts +0 -979
  195. package/src/agent/verify.ts +0 -571
  196. package/src/agent/xychart-body.ts +0 -472
  197. package/src/architecture/config.ts +0 -282
  198. package/src/architecture/layout.ts +0 -496
  199. package/src/architecture/parser.ts +0 -375
  200. package/src/architecture/renderer.ts +0 -611
  201. package/src/architecture/types.ts +0 -113
  202. package/src/ascii/ansi.ts +0 -423
  203. package/src/ascii/architecture.ts +0 -210
  204. package/src/ascii/canvas.ts +0 -443
  205. package/src/ascii/class-diagram.ts +0 -697
  206. package/src/ascii/converter.ts +0 -475
  207. package/src/ascii/draw.ts +0 -1693
  208. package/src/ascii/edge-bundling.ts +0 -328
  209. package/src/ascii/edge-routing.ts +0 -330
  210. package/src/ascii/er-diagram.ts +0 -439
  211. package/src/ascii/gantt.ts +0 -276
  212. package/src/ascii/grid.ts +0 -747
  213. package/src/ascii/index.ts +0 -196
  214. package/src/ascii/journey.ts +0 -189
  215. package/src/ascii/meta.ts +0 -244
  216. package/src/ascii/multiline-utils.ts +0 -80
  217. package/src/ascii/pathfinder.ts +0 -301
  218. package/src/ascii/pie.ts +0 -67
  219. package/src/ascii/quadrant.ts +0 -158
  220. package/src/ascii/reverse.ts +0 -216
  221. package/src/ascii/sequence.ts +0 -499
  222. package/src/ascii/shapes/circle.ts +0 -27
  223. package/src/ascii/shapes/corners.ts +0 -143
  224. package/src/ascii/shapes/diamond.ts +0 -27
  225. package/src/ascii/shapes/hexagon.ts +0 -27
  226. package/src/ascii/shapes/index.ts +0 -106
  227. package/src/ascii/shapes/rectangle.ts +0 -168
  228. package/src/ascii/shapes/rounded.ts +0 -27
  229. package/src/ascii/shapes/special.ts +0 -332
  230. package/src/ascii/shapes/stadium.ts +0 -110
  231. package/src/ascii/shapes/state.ts +0 -192
  232. package/src/ascii/shapes/types.ts +0 -73
  233. package/src/ascii/timeline.ts +0 -128
  234. package/src/ascii/types.ts +0 -312
  235. package/src/ascii/validate.ts +0 -120
  236. package/src/ascii/width.ts +0 -81
  237. package/src/ascii/xychart.ts +0 -919
  238. package/src/browser.ts +0 -29
  239. package/src/class/layout.ts +0 -240
  240. package/src/class/parser.ts +0 -332
  241. package/src/class/renderer.ts +0 -638
  242. package/src/class/types.ts +0 -129
  243. package/src/cli/agent-instructions.ts +0 -1
  244. package/src/cli/am-bin.ts +0 -6
  245. package/src/cli/exit-codes.ts +0 -18
  246. package/src/cli/index.ts +0 -1117
  247. package/src/cli/init-agent.ts +0 -147
  248. package/src/color-resolver.ts +0 -152
  249. package/src/elk-instance.ts +0 -114
  250. package/src/er/layout.ts +0 -187
  251. package/src/er/parser.ts +0 -226
  252. package/src/er/renderer.ts +0 -792
  253. package/src/er/types.ts +0 -99
  254. package/src/font-manifest.ts +0 -27
  255. package/src/gantt/layout.ts +0 -365
  256. package/src/gantt/parser.ts +0 -282
  257. package/src/gantt/pipeline.ts +0 -27
  258. package/src/gantt/renderer.ts +0 -414
  259. package/src/gantt/schedule.ts +0 -513
  260. package/src/gantt/types.ts +0 -255
  261. package/src/index.ts +0 -368
  262. package/src/journey/layout.ts +0 -520
  263. package/src/journey/parser.ts +0 -218
  264. package/src/journey/renderer.ts +0 -811
  265. package/src/journey/types.ts +0 -144
  266. package/src/layout/geometry.ts +0 -182
  267. package/src/layout/pass.ts +0 -142
  268. package/src/layout/passes/index.ts +0 -3916
  269. package/src/layout-engine.ts +0 -1565
  270. package/src/layout-rubric.ts +0 -659
  271. package/src/mcp/artifacts.ts +0 -137
  272. package/src/mcp/dynamic-harness.ts +0 -31
  273. package/src/mcp/dynamic-modules.d.ts +0 -7
  274. package/src/mcp/facade.ts +0 -608
  275. package/src/mcp/harness-runtime.ts +0 -203
  276. package/src/mcp/hosted-server.ts +0 -468
  277. package/src/mcp/mcp-bin.ts +0 -3
  278. package/src/mcp/mcp-cli.ts +0 -82
  279. package/src/mcp/protocol.ts +0 -13
  280. package/src/mcp/sandbox.ts +0 -195
  281. package/src/mcp/sdk-decl.ts +0 -387
  282. package/src/mcp/server.ts +0 -362
  283. package/src/mcp/tool-surface.ts +0 -146
  284. package/src/mermaid-source.ts +0 -655
  285. package/src/multiline-utils.ts +0 -228
  286. package/src/parser.ts +0 -1031
  287. package/src/pie/layout.ts +0 -168
  288. package/src/pie/parser.ts +0 -136
  289. package/src/pie/renderer.ts +0 -234
  290. package/src/pie/types.ts +0 -82
  291. package/src/quadrant/layout.ts +0 -191
  292. package/src/quadrant/parser.ts +0 -183
  293. package/src/quadrant/renderer.ts +0 -322
  294. package/src/quadrant/types.ts +0 -113
  295. package/src/render-family-hooks.ts +0 -244
  296. package/src/renderer.ts +0 -1099
  297. package/src/route-contracts.ts +0 -2723
  298. package/src/scene/backend.ts +0 -76
  299. package/src/scene/fidelity.ts +0 -183
  300. package/src/scene/hybrid-backend.ts +0 -174
  301. package/src/scene/ir.ts +0 -181
  302. package/src/scene/marks.ts +0 -127
  303. package/src/scene/rough-backend.ts +0 -378
  304. package/src/scene/seed.ts +0 -46
  305. package/src/scene/style-registry.ts +0 -556
  306. package/src/sequence/layout.ts +0 -456
  307. package/src/sequence/parser.ts +0 -255
  308. package/src/sequence/renderer.ts +0 -604
  309. package/src/sequence/types.ts +0 -154
  310. package/src/shape-clipping.ts +0 -351
  311. package/src/shared/accessibility-directives.ts +0 -22
  312. package/src/shared/batched.ts +0 -61
  313. package/src/shared/color-math.ts +0 -72
  314. package/src/shared/svg-a11y.ts +0 -29
  315. package/src/shared/syntax-error.ts +0 -17
  316. package/src/shared/unicode-ranges.ts +0 -135
  317. package/src/styles.ts +0 -318
  318. package/src/svg-paths.ts +0 -28
  319. package/src/text-metrics.ts +0 -248
  320. package/src/theme.ts +0 -639
  321. package/src/timeline/layout.ts +0 -381
  322. package/src/timeline/parser.ts +0 -215
  323. package/src/timeline/renderer.ts +0 -538
  324. package/src/timeline/types.ts +0 -105
  325. package/src/types.ts +0 -454
  326. package/src/website-worker-modules.d.ts +0 -18
  327. package/src/xychart/axis-utils.ts +0 -109
  328. package/src/xychart/colors.ts +0 -124
  329. package/src/xychart/config.ts +0 -88
  330. package/src/xychart/layout.ts +0 -656
  331. package/src/xychart/parser.ts +0 -504
  332. package/src/xychart/renderer.ts +0 -640
  333. package/src/xychart/types.ts +0 -282
@@ -1,423 +0,0 @@
1
- # Journey Usage Research
2
-
3
- Status: research note
4
- Last checked: 2026-07-09
5
-
6
- This note captures online research into how people use Journey diagrams and what
7
- users have asked for in Mermaid, Mermaid ASCII, and Beautiful Mermaid issue/PR
8
- history. It is a companion to `journey-migration-parity.md`.
9
-
10
- ## Research Method
11
-
12
- Sources inspected:
13
-
14
- - Mermaid's official User Journey syntax docs.
15
- - Mermaid's current `JourneyDiagramConfig` type on `develop`.
16
- - UX/customer-journey-mapping guidance from Nielsen Norman Group, Atlassian, and
17
- Interaction Design Foundation.
18
- - Mermaid open and closed issues/PRs around Journey diagrams.
19
- - Mermaid ASCII open and closed issues/PRs.
20
- - Beautiful Mermaid open and closed issues/PRs.
21
- - Agentic Mermaid open and closed Journey-related issues/PRs.
22
- - Public GitHub code search for Mermaid `journey` blocks and prompt/contracts
23
- that require them.
24
-
25
- The 2026-07-09 pass used GitHub issue/PR search for `journey` in
26
- `mermaid-js/mermaid`, the full open/closed issue and PR lists for
27
- `lukilabs/beautiful-mermaid`, and the Agentic Mermaid issue/PR list. A follow-up
28
- direct-fork pass used GitHub's forks API sorted by stargazers, then searched the
29
- ranked head of each direct-fork set for Journey issue/PR/code signal. The
30
- reusable helper is `scripts/research/fork-journey-crawl.ts`.
31
-
32
- This is not a complete corpus study. GitHub code search is especially noisy:
33
- many results are copied Mermaid documentation examples, prompt templates, or
34
- references to "journey" outside Mermaid syntax. The conclusions below focus on
35
- repeated signals across sources.
36
-
37
- ## Executive Summary
38
-
39
- People use journey maps to communicate a user's experience through stages, not
40
- just to list tasks. In UX practice, a journey map commonly includes persona,
41
- scenario, phases, actions, thoughts, emotions, touchpoints, pain points,
42
- opportunities, and ownership. Mermaid's `journey` diagram intentionally models a
43
- small subset of that: sections, scored tasks, and actors.
44
-
45
- For Mermaid `journey` specifically, public issue/PR demand is mostly about
46
- rendering fidelity and migration reliability:
47
-
48
- - text must not clip,
49
- - long actor labels must wrap,
50
- - margins and viewBox bounds must be tight,
51
- - section bands must span the correct tasks,
52
- - score values must stay within valid bounds,
53
- - title, legend, section, task, actor, and score styling must be configurable,
54
- - `accTitle` and `accDescr` must work,
55
- - config/frontmatter/directives must follow Mermaid's standard pattern.
56
-
57
- There is little evidence that users want a radically richer Journey grammar in
58
- Mermaid itself. There is evidence that they expect Mermaid-compatible syntax,
59
- stable classic layout behavior, and enough configurability to embed diagrams in
60
- docs, editors, mobile views, and generated artifacts.
61
-
62
- For ASCII renderers, the demand signal is broader than Journey: users want real
63
- Mermaid documents to render in terminals, with graceful handling for unsupported
64
- constructs, multiline labels, width control, and international text. There is no
65
- strong public Mermaid ASCII Journey-specific request yet, so Journey ASCII should
66
- prioritize semantic readability and width correctness over visual mimicry.
67
-
68
- ## UX Practice: What Journey Maps Usually Contain
69
-
70
- Nielsen Norman Group describes journey mapping as first creating a timeline of
71
- user goals and actions, then adding user thoughts and emotions to build a
72
- narrative that can be visualized for design work. Its deconstruction calls out a
73
- lens of persona and scenario, chunkable phases, actions, thoughts, emotional
74
- experience, insights, pain points, opportunities, and ownership. It also says
75
- journey maps can help break organizational silos, assign ownership of
76
- touchpoints, and understand quantitative data in context.
77
-
78
- Source:
79
- https://www.nngroup.com/articles/customer-journey-mapping/
80
-
81
- Atlassian's playbook treats journey mapping as a collaborative workshop. It
82
- starts with persona back-story, goals, pain points, requested features, and
83
- outcomes; then maps pain points under touchpoints and asks whether each pain
84
- point is trivial, requires a workaround, or causes abandonment. It explicitly
85
- supports current-state and future-state maps.
86
-
87
- Source:
88
- https://www.atlassian.com/team-playbook/plays/customer-journey-mapping
89
-
90
- Interaction Design Foundation emphasizes that journey maps often over-emphasize
91
- actions and touchpoints while missing the emotional journey. It suggests adding
92
- quotes, symbols, or graphs to represent emotional highs and lows.
93
-
94
- Source:
95
- https://www.interaction-design.org/literature/topics/customer-journey-map
96
-
97
- Implication for Agentic Mermaid:
98
-
99
- - Mermaid Journey should not be over-sold as a full UX journey-map canvas.
100
- - Scores are the only built-in emotional/satisfaction proxy.
101
- - Richer UX concepts should be future extensions, not blockers for Mermaid
102
- migration parity.
103
-
104
- ## Mermaid Journey Syntax: Small, Stable Model
105
-
106
- Mermaid's official docs define User Journey diagrams as high-detail steps that
107
- different users take to complete a task, showing current workflow and areas for
108
- improvement. The docs say each journey is split into sections, and task syntax is:
109
-
110
- ```text
111
- Task name: <score>: <comma separated list of actors>
112
- ```
113
-
114
- The score is documented as a number from 1 through 5 inclusive.
115
-
116
- Source:
117
- https://mermaid.js.org/syntax/userJourney.html
118
-
119
- Implication for Agentic Mermaid:
120
-
121
- - The parser should enforce or diagnose the 1..5 score contract.
122
- - The core model should remain title, sections, tasks, score, actors, and
123
- accessibility metadata.
124
- - Custom score ranges are a feature request, not baseline Mermaid parity.
125
-
126
- ## Public GitHub Usage Patterns
127
-
128
- Public code search found a thin but useful signal:
129
-
130
- - Many public `journey` examples are exact copies or small variants of Mermaid's
131
- own "working day" example.
132
- - Several repositories use prompt contracts that require generated PRD/user
133
- journey documents to include renderable Mermaid `journey` blocks.
134
- - A11y-oriented tooling parses Journey diagrams into narrative descriptions.
135
- - Obsidian/Excalidraw-style notes embed Mermaid Journey text as stored diagram
136
- content.
137
-
138
- Examples:
139
-
140
- - Prompt contract requiring at least two renderable visual user journeys:
141
- https://github.com/AcredIA-UMSS/sigesa-docs/blob/2c12a4409129f28d0b17ad6b98d74edb3fe635d7/docs/06_prompt_contracts/contract_sdlc_03_generador_prd.md
142
- - Scenario docs suggesting Mermaid Journey for key end-to-end flows:
143
- https://github.com/johanolofsson72/juradrop/blob/626e0a670d89155acb2db469bbc5377da13305ca/.claude/rules/scenarios.md
144
- - Accessibility studio notes for extracting Journey title, sections, and steps:
145
- https://github.com/mgifford/a11y-mermaid-studio/blob/64af9e42d527708e8603fd7840683e737e1dbb85/NARRATIVE_ENHANCEMENT.md
146
- - Mermaid docs copy stored in another project:
147
- https://github.com/notnotdurgesh/GodChat/blob/8dff2216c5594c85b94023e125427a3a65e7b7e6/backend/MermaidDocs/SyntaxDocs/userJourney.md
148
-
149
- Implication for Agentic Mermaid:
150
-
151
- - Journey support will see agent-generated inputs, copied examples, and docs
152
- embeds.
153
- - Tolerant parsing, diagnostics, and accessibility metadata matter.
154
- - We should expect long labels and non-English text because PRD/user-flow
155
- documents are often prose-heavy.
156
-
157
- ## Mermaid Issue and PR Demand
158
-
159
- Mermaid's Journey issue history is concentrated around the classic renderer's
160
- layout, theming, and parser/config integration.
161
-
162
- | Item | State | Signal |
163
- |---|---:|---|
164
- | Mermaid PR #1334, "Feature/user journey" | merged | Original Journey implementation. |
165
- | Mermaid issue #1903 / PR #1916 | closed/merged | Journey needed Mermaid's standard config/directive pattern. |
166
- | Mermaid issue #1966 / PR #1967 | closed/merged | Right margin grew with section count. |
167
- | Mermaid issue #2132 / PR #2133 | closed/merged | Users wanted theme variables for section, task, actors, and score indicator. |
168
- | Mermaid PR #2919 | merged | Added accessible title and description to User Journey. |
169
- | Mermaid issue #3501 | open | Too much bottom whitespace, especially visible on mobile. |
170
- | Mermaid issue #3508 / PR #6225 | closed/merged | Users wanted Journey title color, font family, and font size config. |
171
- | Mermaid issue #4224 / PR #4074 | closed/merged | Section label should span all tasks in the section. |
172
- | Mermaid issue #4248 | open | Request for custom Journey score scale. |
173
- | Mermaid issue #6243 / PRs #6246, #6248 | open/open/closed | Long task text clips; boxes should resize and SVG bounds should update. |
174
- | Mermaid issue #6262 / PR #6263 | open/closed | Invalid high score values move faces out of bounds; users expect validation or clamping. |
175
- | Mermaid PR #6229 | merged | Legend font family should be configurable. |
176
- | Mermaid PR #6274 | merged | Long actor legend labels overlap diagram; added wrapping and `maxLabelWidth`. |
177
- | Mermaid issue #5741 / PR #7410 | open/merged | Duplicate SVG marker/element IDs affect Journey when multiple diagrams share a page. |
178
- | Mermaid issue #6013 | closed | Journey PNG export lost fonts in Firefox. |
179
- | Mermaid issue #7105 / PR #7110 | open/open | Journey titles containing `#` or entity-like text were truncated; title/acc text parsing must preserve literal text. |
180
-
181
- Sources:
182
-
183
- - https://github.com/mermaid-js/mermaid/pull/1334
184
- - https://github.com/mermaid-js/mermaid/issues/1903
185
- - https://github.com/mermaid-js/mermaid/pull/1916
186
- - https://github.com/mermaid-js/mermaid/issues/1966
187
- - https://github.com/mermaid-js/mermaid/pull/1967
188
- - https://github.com/mermaid-js/mermaid/issues/2132
189
- - https://github.com/mermaid-js/mermaid/pull/2133
190
- - https://github.com/mermaid-js/mermaid/pull/2919
191
- - https://github.com/mermaid-js/mermaid/issues/3501
192
- - https://github.com/mermaid-js/mermaid/issues/3508
193
- - https://github.com/mermaid-js/mermaid/pull/6225
194
- - https://github.com/mermaid-js/mermaid/issues/4224
195
- - https://github.com/mermaid-js/mermaid/pull/4074
196
- - https://github.com/mermaid-js/mermaid/issues/4248
197
- - https://github.com/mermaid-js/mermaid/issues/6243
198
- - https://github.com/mermaid-js/mermaid/pull/6246
199
- - https://github.com/mermaid-js/mermaid/pull/6248
200
- - https://github.com/mermaid-js/mermaid/issues/6262
201
- - https://github.com/mermaid-js/mermaid/pull/6263
202
- - https://github.com/mermaid-js/mermaid/pull/6229
203
- - https://github.com/mermaid-js/mermaid/pull/6274
204
- - https://github.com/mermaid-js/mermaid/issues/5741
205
- - https://github.com/mermaid-js/mermaid/pull/7410
206
- - https://github.com/mermaid-js/mermaid/issues/6013
207
- - https://github.com/mermaid-js/mermaid/issues/7105
208
- - https://github.com/mermaid-js/mermaid/pull/7110
209
-
210
- Implication for Agentic Mermaid:
211
-
212
- - A Mermaid-classic Journey mode is justified if migration parity matters.
213
- - That mode must include the actor legend, section spans, score-positioned
214
- sentiment markers, and progression baseline.
215
- - Text measurement and wrapping are not cosmetic; they are recurring user
216
- complaints.
217
- - Score validation must be explicit.
218
- - Theme/config support must include Journey-specific knobs, not only generic
219
- node/group styles.
220
- - SVG IDs must be namespaced per render so multiple Journey diagrams can share a
221
- page without marker collisions.
222
- - Literal title/accessibility text should not be narrowed more strictly than
223
- Mermaid itself; `#`, entities, and punctuation are content unless the grammar
224
- says otherwise.
225
-
226
- ## Mermaid ASCII Issue and PR Demand
227
-
228
- Mermaid ASCII has no public Journey-specific issue or PR signal in the inspected
229
- set. Its demand is about rendering real Mermaid documents in terminals.
230
-
231
- Important items:
232
-
233
- | Item | State | Signal |
234
- |---|---:|---|
235
- | Mermaid ASCII issue #74 | open | A company tested about 590 real RFC diagrams; only about 32% rendered. Goal is broad real-world coverage. |
236
- | Mermaid ASCII issue #61 | open | Requests stateDiagram-v2 support because it is common in technical specs. |
237
- | Mermaid ASCII issue #62 | open | Requests sequence notes because a single unsupported note aborts rendering. |
238
- | Mermaid ASCII PR #47 | open | Adds multiline labels and `--maxWidth`/fitting; discussion says multiline labels are critical for everyday usage. |
239
- | Mermaid ASCII issue #59 | open | International text renders incorrectly. |
240
-
241
- Sources:
242
-
243
- - https://github.com/AlexanderGrooff/mermaid-ascii/issues/74
244
- - https://github.com/AlexanderGrooff/mermaid-ascii/issues/61
245
- - https://github.com/AlexanderGrooff/mermaid-ascii/issues/62
246
- - https://github.com/AlexanderGrooff/mermaid-ascii/pull/47
247
- - https://github.com/AlexanderGrooff/mermaid-ascii/issues/59
248
-
249
- Implication for Agentic Mermaid:
250
-
251
- - Journey ASCII does not need to imitate Mermaid's SVG face/axis renderer in P0.
252
- - It does need to preserve section/task/score/actor semantics.
253
- - It should honor `maxWidth`, multiline labels, and display-width correctness.
254
- - Unsupported Journey syntax should not silently abort or become useless without
255
- explanation.
256
-
257
- ## Beautiful Mermaid Issue and PR Demand
258
-
259
- Beautiful Mermaid's public Journey-specific issue signal is weak. The notable
260
- Journey PRs were closed as wrong-repo attempts:
261
-
262
- - https://github.com/lukilabs/beautiful-mermaid/pull/62
263
- - https://github.com/lukilabs/beautiful-mermaid/pull/72
264
- - https://github.com/lukilabs/beautiful-mermaid/pull/75
265
-
266
- Those PRs are useful as implementation-history signals because they attempted to
267
- add Journey parser, layout, SVG renderer, ASCII renderer, tests, docs, source
268
- preprocessing, frontmatter/config handling, and accessibility directives. They
269
- are not strong evidence of external user demand because they were not accepted
270
- feature requests in that repository.
271
-
272
- The stronger Beautiful Mermaid signals are broader:
273
-
274
- | Item | State | Signal |
275
- |---|---:|---|
276
- | Beautiful Mermaid issue #2 | open | Users ask whether syntax is 1:1 with Mermaid and whether original grammars are reused. |
277
- | Beautiful Mermaid issue #59 | open | Users ask for all Mermaid v11 diagrams. |
278
- | Beautiful Mermaid issue #79 | open | Users ask for Mermaid frontmatter/config support. |
279
- | Beautiful Mermaid issue #86 | open | Users request timeline support for education. This is adjacent to Journey because timeline/Journey are often added together. |
280
- | Beautiful Mermaid issue #122 / PR #128 | open/open | ASCII fullwidth/CJK/emoji labels misalign; display-width correctness is important. |
281
- | Beautiful Mermaid issues #100, #101 | open | Users want font and layout controls exposed as render options. |
282
- | Beautiful Mermaid PR #117 | open | Frontmatter/init config support is expected before diagram parsing. |
283
- | Beautiful Mermaid issue #115 / PR #116 | open/open | Custom fills need automatic contrast handling. |
284
- | Beautiful Mermaid issue #18 / PR #123 | open/open | Font settings should accept CSS variables. |
285
- | Beautiful Mermaid issues #5, #26 / PRs #30, #38 | closed/closed/closed/closed | `<br>` and multiline labels are recurring compatibility expectations. |
286
-
287
- Sources:
288
-
289
- - https://github.com/lukilabs/beautiful-mermaid/issues/2
290
- - https://github.com/lukilabs/beautiful-mermaid/issues/59
291
- - https://github.com/lukilabs/beautiful-mermaid/issues/79
292
- - https://github.com/lukilabs/beautiful-mermaid/issues/86
293
- - https://github.com/lukilabs/beautiful-mermaid/issues/122
294
- - https://github.com/lukilabs/beautiful-mermaid/pull/128
295
- - https://github.com/lukilabs/beautiful-mermaid/issues/100
296
- - https://github.com/lukilabs/beautiful-mermaid/issues/101
297
- - https://github.com/lukilabs/beautiful-mermaid/pull/117
298
- - https://github.com/lukilabs/beautiful-mermaid/issues/115
299
- - https://github.com/lukilabs/beautiful-mermaid/pull/116
300
- - https://github.com/lukilabs/beautiful-mermaid/issues/18
301
- - https://github.com/lukilabs/beautiful-mermaid/pull/123
302
- - https://github.com/lukilabs/beautiful-mermaid/issues/5
303
- - https://github.com/lukilabs/beautiful-mermaid/issues/26
304
- - https://github.com/lukilabs/beautiful-mermaid/pull/30
305
- - https://github.com/lukilabs/beautiful-mermaid/pull/38
306
-
307
- Implication for Agentic Mermaid:
308
-
309
- - Users compare alternative renderers by syntax compatibility first.
310
- - Mermaid config/frontmatter compatibility is part of perceived parity.
311
- - ASCII text metrics are a recurring serious issue across renderers.
312
- - Family-specific render options should be explicit and documented.
313
- - Theme/palette support should include contrast and CSS-variable font paths, not
314
- only fixed literal colors.
315
-
316
- ## Ranked Direct-Fork Crawl
317
-
318
- The naive crawl strategy, "inspect every fork equally," is low signal. Mermaid
319
- has 9,099 forks and Beautiful Mermaid has 360 forks as of this pass. Most forks
320
- have no issues, no PRs, and no independent Journey discussion. The better crawl
321
- is:
322
-
323
- 1. Fetch forks through GitHub REST with `sort=stargazers`.
324
- 2. Rank by `stars*10 + forks*3 + openIssues*1.5 + recencyBoost(pushed_at)`.
325
- 3. Search issues, PRs, and code only for the ranked head first.
326
- 4. Expand to second-order forks only if the ranked head produces Journey signal
327
- or if a fork is known to carry relevant divergent implementation work.
328
-
329
- Commands:
330
-
331
- ```sh
332
- bun run scripts/research/fork-journey-crawl.ts lukilabs/beautiful-mermaid --max-forks 100 --limit 12
333
- bun run scripts/research/fork-journey-crawl.ts mermaid-js/mermaid --max-forks 100 --limit 12
334
- ```
335
-
336
- Beautiful Mermaid ranked head:
337
-
338
- | Rank | Fork | Stars | Pushed | Journey issue/PR signal |
339
- |---:|---|---:|---|---|
340
- | 1 | `vercel-labs/beautiful-mermaid` | 28 | 2026-02-24 | none found |
341
- | 2 | `adewale/agentic-mermaid` | 9 | 2026-07-09 | issue #128, PR #6, style/test PRs |
342
- | 3 | `ysknsid25/beautiful-mermaid` | 4 | 2026-02-26 | none found |
343
- | 4 | `Orbiter/beautiful-mermaid-py` | 3 | 2026-02-07 | none found |
344
- | 5 | `rohitg00/beautiful-mermaid` | 3 | 2026-02-02 | none found |
345
-
346
- Mermaid ranked head:
347
-
348
- | Rank | Fork | Stars | Pushed | Journey issue/PR signal |
349
- |---:|---|---:|---|---|
350
- | 1 | `jacob-lcs/mermaid` | 164 | 2026-02-12 | none found |
351
- | 2 | `jgraph/mermaid` | 50 | 2026-05-01 | none found |
352
- | 3 | `Mermaid-Chart/mermaid-develop` | 20 | 2023-11-13 | none found |
353
- | 4 | `credkellar-boop/mermaid` | 4 | 2026-07-03 | none found |
354
- | 5 | `lishid/mermaid` | 5 | 2023-07-04 | none found |
355
-
356
- The top-12 Mermaid fork PR search returned one false-positive title hit:
357
- `tractorjuice/mermaid#1`, "Update E2E Timings." It is not Journey feature
358
- demand. Code-search queries for `journey` scoped to the ranked fork heads
359
- returned no additional fork-specific signal in this pass.
360
-
361
- Implication for Agentic Mermaid:
362
-
363
- - Continue treating upstream Mermaid as the primary Journey demand source.
364
- - Use the ranked direct-fork pass to catch divergent implementation work and
365
- packaging or CLI expectations, not as a replacement for upstream issue/PR
366
- research.
367
- - Re-run the ranked crawl periodically; do not spend equal effort on the long
368
- tail unless new stars, activity, or search hits justify it.
369
-
370
- ## Product Conclusions
371
-
372
- 1. Fix parser parity first.
373
-
374
- `accTitle`, `accDescr`, quoted labels, `<br>`, comments, frontmatter, and init
375
- directives must be structured or explicitly diagnosed. Renderer support alone
376
- is not enough.
377
-
378
- 2. Replace the current card layout as the public SVG default.
379
-
380
- The existing Agentic Mermaid Journey look was useful as a compact
381
- documentation prototype. It is not what Mermaid users expect when migrating a
382
- Journey diagram, and pre-launch we do not need to preserve it as public
383
- behavior.
384
-
385
- 3. Adopt Mermaid's visual metaphor while preserving Agentic Mermaid polish.
386
-
387
- The default renderer should prioritize Mermaid's classic reading model:
388
- actor legend, left-to-right task progression, section spans, score-positioned
389
- sentiment markers, and a progression baseline. The implementation should keep
390
- the library's measured labels, restrained spacing, theme-aware colors, and
391
- crisp geometry.
392
-
393
- 4. Treat text handling as a core feature.
394
-
395
- Long labels, actor wrapping, multiline labels, title sizing, international
396
- text, and SVG bounds have repeated public demand across Mermaid and terminal
397
- renderers.
398
-
399
- 5. Namespace SVG internals.
400
-
401
- Journey uses markers and repeated internal IDs. Duplicate IDs are a known
402
- upstream issue when multiple diagrams appear in one document, so generated
403
- Journey markers and references must be scoped. The implementation now uses
404
- Journey-specific marker names and participates in the repo-wide `idPrefix`
405
- path for true per-instance embedding.
406
-
407
- 6. Make score behavior strict and explainable.
408
-
409
- Baseline Mermaid syntax is 1..5. Invalid scores should receive targeted
410
- diagnostics. Custom score scales can be considered later because Mermaid has
411
- an open request for it, but it is not baseline compatibility.
412
-
413
- 7. Keep Journey ASCII semantic and width-correct.
414
-
415
- There is no strong signal for classic Journey visuals in ASCII. A compact
416
- section/task/score/actor view is acceptable if it wraps correctly and explains
417
- unsupported syntax.
418
-
419
- 8. Do not expand Journey into a full service-blueprint grammar in this issue.
420
-
421
- UX practice contains richer concepts, but Mermaid's public model is smaller.
422
- Extra lanes for emotions, touchpoints, pain points, opportunities, and
423
- ownership should be a separate design, not part of Mermaid parity.
@@ -1,125 +0,0 @@
1
- # User Journey (`journey`) Design Note
2
-
3
- ## Overview
4
-
5
- This document captures the design choices behind Agentic Mermaid's `journey`
6
- implementation. The goal is Mermaid syntax and visual-metaphor compatibility
7
- with output that still feels native to the rest of the library rather than like
8
- a separate embedded renderer.
9
-
10
- The implementation follows the standard Agentic Mermaid pipeline:
11
-
12
- - `src/journey/parser.ts`
13
- - `src/journey/layout.ts`
14
- - `src/journey/renderer.ts`
15
- - `src/ascii/journey.ts`
16
-
17
- ## Input Model
18
-
19
- Supported Mermaid constructs:
20
-
21
- - `journey`
22
- - `title ...`
23
- - `section ...`
24
- - scored tasks in the form `Task: 1..5[: Actor, Actor]`
25
- - `accTitle: ...`
26
- - `accDescr: ...`
27
- - multiline `accDescr { ... }`
28
- - Mermaid comments, frontmatter, and init directives before the header
29
-
30
- Quoted labels are normalized the same way other Agentic Mermaid diagram
31
- parsers normalize Mermaid labels. `<br>` is converted to multi-line text for
32
- titles, section labels, tasks, actor labels, and accessibility metadata.
33
-
34
- ## Layout Strategy
35
-
36
- Journey diagrams are rendered as a left-to-right experience curve:
37
-
38
- - tasks are laid out in source order as horizontal task columns
39
- - named sections become rounded spans across the range of their tasks
40
- - unnamed implicit sections stay unframed
41
- - actors are collected into a left legend in first-seen order
42
- - task participation is shown with compact actor-colored dots
43
- - score `5` maps to the highest guide position and score `1` maps to the
44
- lowest guide position
45
- - each task gets a vertical track from its task box to the progression baseline
46
- - each score is rendered as a sentiment marker on the curve
47
- - the baseline arrow reinforces forward progression
48
-
49
- The layout uses the shared text measurement helpers so task boxes, section
50
- spans, and the actor legend expand from content rather than from hardcoded label
51
- assumptions.
52
-
53
- ## Visual Language
54
-
55
- The renderer follows Mermaid's Journey metaphor while preserving the higher
56
- quality Agentic Mermaid treatment:
57
-
58
- - crisp rounded task boxes and section spans
59
- - subtle tinted section fills instead of heavy blocks
60
- - compact actor dots instead of noisy repeated labels
61
- - score guide lines and a restrained baseline rather than a full chart frame
62
- - theme-driven colors via shared CSS custom properties instead of renderer-local
63
- default-blue assumptions
64
-
65
- This keeps the diagram family distinct from flowcharts while still matching the
66
- library's spacing, contrast, and restraint.
67
-
68
- ## Style, Palette, And Mermaid Config
69
-
70
- Journey uses the same public Style + Palette stack as the rest of the SVG
71
- pipeline. Named looks and palette-only styles control the family-wide treatment
72
- (colors, typography, strokes, fills, and page treatment) without adding
73
- Journey-specific public style fields.
74
-
75
- Journey-specific visual channels are palette-aware. Section fills/bands,
76
- section strokes, actor dots, score marker faces, score marker ink, and the
77
- baseline all derive from Agentic Mermaid palette tokens unless Mermaid source
78
- config provides a more specific Journey override.
79
-
80
- Supported Mermaid `journey` config fields include:
81
-
82
- - `actorColours`
83
- - `sectionFills`
84
- - `sectionColours`
85
- - `taskFontSize`
86
- - `taskFontFamily`
87
- - `titleColor`
88
- - `titleFontFamily`
89
- - `titleFontSize`
90
- - `taskMargin`
91
- - `width`
92
- - `height`
93
- - `diagramMarginX`
94
- - `diagramMarginY`
95
- - `leftMargin`
96
- - `maxLabelWidth`
97
-
98
- The sequence-era fields that do not map to this visual metaphor (`noteMargin`,
99
- `messageMargin`, `messageAlign`, `bottomMarginAdj`, `rightAngles`,
100
- `activationWidth`, `textPlacement`) are accepted in normalized config for
101
- Mermaid compatibility but do not currently alter Journey SVG geometry.
102
-
103
- ## Accessibility
104
-
105
- `accTitle` and `accDescr` are surfaced as root SVG accessibility metadata:
106
-
107
- - root SVG gets `role="img"`
108
- - root SVG gets `aria-roledescription="user journey"`
109
- - `accTitle` maps to `<title>` and `aria-labelledby`
110
- - `accDescr` maps to `<desc>` and `aria-describedby`
111
- - when `accTitle` is absent, the visible Mermaid `title` becomes the fallback
112
- accessible title
113
-
114
- Accessibility metadata is intentionally non-visual. It improves assistive
115
- technology output without changing the rendered diagram layout.
116
-
117
- ## Known Boundaries
118
-
119
- - Journey support currently models Mermaid's scored-task syntax, not richer
120
- swimlane semantics beyond section grouping.
121
- - Accessibility metadata is surfaced in SVG output; PNG output inherits the
122
- rendered SVG pixels; ASCII output ignores it because it is not part of the
123
- visible terminal rendering model.
124
- - Mermaid Journey config colors and Agentic style roles both affect SVG output;
125
- ASCII stays intentionally text-first and does not render color palettes.
@@ -1,85 +0,0 @@
1
- # XY Chart (xychart / xychart-beta) — Design Notes
2
-
3
- ## Overview
4
-
5
- The xychart implementation follows the same parse -> layout -> render pipeline used elsewhere in Agentic Mermaid, with Mermaid's stable `xychart` syntax treated as primary and `xychart-beta` preserved for backward compatibility.
6
-
7
- Supported chart forms:
8
-
9
- - vertical and horizontal charts
10
- - bar, line, and mixed-series plots
11
- - categorical and numeric x-axes
12
- - semicolon-separated Mermaid statements
13
- - Mermaid accessibility directives (`accTitle` / `accDescr`)
14
- - Mermaid YAML frontmatter and `init` / `initialize` directives, including Mermaid-style loose object literals, for the current documented `xyChart` config surface
15
- - SVG, PNG, and ASCII output routed through the public entry points
16
-
17
- ## Pipeline
18
-
19
- ### Source preprocessing
20
-
21
- `src/mermaid-source.ts` strips comments, parses Mermaid YAML frontmatter plus `init` / `initialize` directives, and produces trimmed diagram lines before xychart parsing begins.
22
-
23
- The preprocessing layer now intentionally lives in one shared place so future Mermaid-surface additions do not have to be reimplemented separately in SVG and ASCII entry points.
24
-
25
- ### Parser
26
-
27
- `src/xychart/parser.ts` accepts:
28
-
29
- - `xychart` and `xychart-beta`
30
- - `horizontal` on the header
31
- - semicolon-separated one-line Mermaid statements
32
- - `accTitle` and single-line or block `accDescr`
33
- - quoted or unquoted titles where Mermaid allows them
34
- - categorical labels with quoting preserved and normalized
35
- - optional series labels on `bar` and `line`
36
- - numeric axis ranges
37
- - Mermaid frontmatter/directives for the current chart, responsive sizing, accessibility, and theme overrides
38
-
39
- The parser keeps unknown Mermaid config fields out of the typed result instead of trying to guess their meaning.
40
-
41
- ### Layout
42
-
43
- `src/xychart/layout.ts` treats Mermaid `xyChart.width` and `height` as total chart size, then fits title and axis furniture into the remaining reserved space before computing the plot area.
44
-
45
- Key layout choices:
46
-
47
- - vertical charts use a left numeric axis and bottom categorical or numeric x-axis
48
- - horizontal charts place the numeric axis at the top and category axis on the left, matching Mermaid more closely
49
- - ticks use a simple linear tick generator for readable numeric steps
50
- - plot geometry stays within the declared chart box
51
- - legends are omitted to keep mixed charts visually quiet
52
-
53
- ### Renderer
54
-
55
- `src/xychart/renderer.ts` and `src/ascii/xychart.ts` share the same parsed chart semantics. PNG output is produced by rasterizing the SVG renderer output.
56
-
57
- Current SVG rendering decisions:
58
-
59
- - explicit axis lines and tick marks by default
60
- - subtle grid lines behind the plot area
61
- - straight line segments rather than spline interpolation
62
- - line dots only for interactive output
63
- - `showDataLabel` applies to bars only, matching Mermaid behavior
64
- - `useMaxWidth` / `useWidth` control responsive root SVG sizing
65
- - `themeCSS` is appended to the chart style block instead of being reinterpreted
66
- - series colors come from the shared theme accent unless Mermaid frontmatter provides `plotColorPalette`
67
-
68
- ## Compatibility Notes
69
-
70
- Supported Mermaid compatibility surface is documented in [README.md](../../../README.md).
71
-
72
- Intentional gap today:
73
-
74
- - visual parity aims to stay close to Mermaid, but is not byte-for-byte identical
75
-
76
- ## Verification Expectations
77
-
78
- XY chart changes should keep the following layers covered:
79
-
80
- - parser tests for stable/beta headers, quoted labels, comments, and frontmatter
81
- - layout tests for chart bounds, axis placement, and visibility rules
82
- - renderer tests for semantic classes, escaping, and theme token usage
83
- - integration tests for full parse -> layout -> render behavior
84
- - ASCII tests for unicode and ASCII-safe rendering
85
- - `scripts/site/samples-data.ts` coverage so the visual samples page exercises the feature
@@ -1,45 +0,0 @@
1
- # System architecture — start here
2
-
3
- How the Agentic Mermaid engine fits together. This is the entry point the
4
- [abstraction audit](./abstraction-audit.md) identified as missing: a single top-down
5
- view of the whole system, distinct from the per-diagram-type design notes.
6
-
7
- ![Agentic Mermaid abstraction architecture: one normalized source is routed through the FamilyPlugin registry into SVG, ASCII, and agent hooks over the same 12 diagram families and shared core types](./architecture.svg)
8
-
9
- One Mermaid source is normalized once, then processed by **three parallel stacks** —
10
- SVG (`renderMermaidSVG`), ASCII (`renderMermaidASCII`), and the agent IR
11
- (`parseMermaid` / `mutate` / `verify`). All three route through the
12
- `FamilyPlugin` registry: SVG uses `layout` + `renderSvg` hooks, ASCII uses
13
- `renderAscii`, and the agent stack uses `parse` / `serialize` / `mutate` /
14
- `verify`. The stacks still keep their own geometry models where that is essential
15
- (float SVG layout vs. terminal grid layout), over a shared core vocabulary in
16
- `src/types.ts`.
17
-
18
- ## This figure is dogfooded and drift-proof
19
-
20
- The diagram is authored as Mermaid ([`architecture.mmd`](./architecture.mmd)) and
21
- rendered to [`architecture.svg`](./architecture.svg) **by our own renderer**. A
22
- determinism snapshot test
23
- ([`src/__tests__/docs-architecture-diagram.test.ts`](../../../src/__tests__/docs-architecture-diagram.test.ts))
24
- re-renders the source and asserts (a) the render is deterministic across calls and
25
- (b) it matches the committed SVG — so the picture can never silently drift from the
26
- code it describes. Regenerate after an intentional source change:
27
-
28
- ```
29
- UPDATE_GOLDEN=1 bun test src/__tests__/docs-architecture-diagram.test.ts
30
- ```
31
-
32
- This is the documentation half of the abstraction work: docs *about* the system are
33
- produced *by* the system, and pinned the same way we pin layout determinism.
34
-
35
- ## Read next
36
-
37
- - [`abstraction-audit.md`](./abstraction-audit.md) — the historical pre-implementation snapshot + ranked issue list **I1–I9**.
38
- - [`abstraction-recommendations.md`](./abstraction-recommendations.md) — literature-grounded fixes, 2026-06-21 reappraisal, and closure criteria for I1–I9.
39
- - [`route-contracts.md`](./route-contracts.md) — the flowchart routing engine (edge classification, direct-lane proofs, certifying straightener).
40
- - [`layout-rubric.md`](./layout-rubric.md) — the deterministic layout-quality rubric.
41
- - [`layout-guarantees-and-robustness.md`](./layout-guarantees-and-robustness.md) — literature + industry synthesis: which invariants we can guarantee by construction vs. only optimize-and-certify, and the path to fuzz-robustness.
42
- - [`source-preservation-ladder.md`](./source-preservation-ladder.md) — the structured\|opaque family-adoption contract (L0–L4).
43
-
44
- > These design docs are co-located here in `design/system/`; per-family notes live in
45
- > [`../families/`](../families/README.md).