agentic-mermaid 0.1.1 → 0.2.0

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 (340) hide show
  1. package/AGENT_NATIVE.md +155 -91
  2. package/CHANGELOG.md +163 -4
  3. package/Instructions_for_agents.md +10 -10
  4. package/LICENSES/Apache-2.0.txt +202 -0
  5. package/README.md +31 -38
  6. package/THIRD_PARTY_NOTICES.md +29 -0
  7. package/assets/hero.png +0 -0
  8. package/dist/agent-core.d.ts +463 -0
  9. package/dist/agent-core.js +397 -0
  10. package/dist/agent.d.ts +73 -1868
  11. package/dist/agent.js +336 -37325
  12. package/dist/agentic-mermaid-mcp.js +7 -38399
  13. package/dist/am.js +33626 -40446
  14. package/dist/chunk-2P5FKUQC.js +3485 -0
  15. package/dist/chunk-2S3VSS6I.js +149 -0
  16. package/dist/chunk-2SILJDW2.js +37 -0
  17. package/dist/chunk-BJYMBT4I.js +61963 -0
  18. package/dist/chunk-FDM43XU7.js +615 -0
  19. package/dist/chunk-MYPDVZCO.js +4702 -0
  20. package/dist/index-DWPa2MJs.d.ts +6780 -0
  21. package/dist/index.d.ts +1 -1
  22. package/dist/index.js +310 -33014
  23. package/dist/mcp-cli-5J47WEY3.js +17 -0
  24. package/docs/README.md +39 -31
  25. package/docs/agent-api-cookbook.md +44 -35
  26. package/docs/agent-mutation-policy.md +1 -1
  27. package/docs/agent-workflow-examples.md +2 -2
  28. package/docs/api.md +284 -77
  29. package/docs/ascii.md +26 -16
  30. package/docs/code-mode-impact.md +214 -0
  31. package/docs/comparison.md +23 -11
  32. package/docs/computational-aesthetics-prototype-plan.md +252 -0
  33. package/docs/config.md +26 -10
  34. package/docs/custom-fonts.md +265 -0
  35. package/docs/custom-style-cookbook.md +130 -9
  36. package/docs/diagram-families.md +48 -23
  37. package/docs/features.md +59 -52
  38. package/docs/fork-differences.md +6 -3
  39. package/docs/getting-started.md +23 -16
  40. package/docs/issue-derived-test-cases.md +29 -22
  41. package/docs/mcp-code-mode-rationale.md +13 -6
  42. package/docs/mcp-http-transport.md +20 -13
  43. package/docs/mermaid-layout-complaints.md +66 -52
  44. package/docs/mutation-testing.md +145 -66
  45. package/docs/quality.md +23 -14
  46. package/docs/react.md +2 -2
  47. package/docs/schemas/style-spec.schema.json +1221 -30
  48. package/docs/style-authoring.md +241 -38
  49. package/docs/svg-semantic-contract.md +49 -0
  50. package/docs/testing-strategy.md +166 -58
  51. package/docs/theming.md +19 -32
  52. package/examples/styles/catalog.json +54 -0
  53. package/examples/styles/cloudflare-workers-inspired-prototype.mmd +9 -0
  54. package/examples/styles/cloudflare-workers-inspired-prototype.style.json +110 -0
  55. package/examples/styles/cupertino-prototype.mmd +10 -0
  56. package/examples/styles/cupertino-prototype.style.json +63 -0
  57. package/examples/styles/mid-century-report.style.json +2 -2
  58. package/examples/styles/star-chart-atlas.style.json +2 -1
  59. package/examples/styles/transit-route-map.style.json +2 -2
  60. package/examples/styles/vercel-inspired-prototype.mmd +6 -0
  61. package/examples/styles/vercel-inspired-prototype.style.json +87 -0
  62. package/package.json +85 -45
  63. package/server.json +2 -2
  64. package/skills/agentic-mermaid-diagram-workflow/SKILL.md +17 -36
  65. package/skills/agentic-mermaid-diagram-workflow/references/cli.md +4 -5
  66. package/skills/agentic-mermaid-diagram-workflow/references/code-mode.md +15 -31
  67. package/skills/agentic-mermaid-diagram-workflow/references/sequence.md +10 -14
  68. package/skills/agentic-mermaid-live-editor/SKILL.md +100 -206
  69. package/TODO.md +0 -684
  70. package/dist/index-wjRjbsP-.d.ts +0 -1102
  71. package/docs/assets/improvements/box-start-connector.png +0 -0
  72. package/docs/assets/improvements/comment-dropped-lint.png +0 -0
  73. package/docs/assets/improvements/er-content-loss.png +0 -0
  74. package/docs/assets/improvements/fan-in-trunks.png +0 -0
  75. package/docs/assets/improvements/gantt-family.png +0 -0
  76. package/docs/assets/improvements/gantt-milestone-clamp.png +0 -0
  77. package/docs/assets/improvements/gantt-verify-seam.png +0 -0
  78. package/docs/assets/improvements/subgraph-container-edges.png +0 -0
  79. package/docs/assets/improvements/wrapper-frontmatter.png +0 -0
  80. package/docs/assets/improvements/wrapper-init-directive.png +0 -0
  81. package/docs/assets/improvements/wrapper-leading-comment.png +0 -0
  82. package/docs/assets/style-cookbook/mid-century-report.png +0 -0
  83. package/docs/assets/style-cookbook/star-chart-atlas.png +0 -0
  84. package/docs/assets/style-cookbook/transit-route-map.png +0 -0
  85. package/docs/contributing/adding-diagram-types.md +0 -144
  86. package/docs/contributing/diagram-family-citizenship.matrix.json +0 -2127
  87. package/docs/contributing/diagram-family-citizenship.md +0 -82
  88. package/docs/contributing/harvesting-upstream-tests.md +0 -126
  89. package/docs/contributing/lessons-learned.md +0 -276
  90. package/docs/contributing/releasing.md +0 -82
  91. package/docs/contributing/visual-review-evidence.md +0 -53
  92. package/docs/design/families/README.md +0 -26
  93. package/docs/design/families/architecture-beta.md +0 -48
  94. package/docs/design/families/flowchart-parser-conformance.md +0 -22
  95. package/docs/design/families/gantt-research.md +0 -137
  96. package/docs/design/families/gantt.md +0 -329
  97. package/docs/design/families/journey-agentic-cards-before.png +0 -0
  98. package/docs/design/families/journey-experience-curve-implementation.png +0 -0
  99. package/docs/design/families/journey-mermaid-classic-implementation.png +0 -0
  100. package/docs/design/families/journey-mermaid-classic-prototype.png +0 -0
  101. package/docs/design/families/journey-mermaid-classic-prototype.svg +0 -163
  102. package/docs/design/families/journey-mermaid-classic-prototype.svg.png +0 -0
  103. package/docs/design/families/journey-migration-parity.md +0 -439
  104. package/docs/design/families/journey-section-overlap-after.png +0 -0
  105. package/docs/design/families/journey-section-overlap-before.png +0 -0
  106. package/docs/design/families/journey-usage-research.md +0 -423
  107. package/docs/design/families/journey.md +0 -153
  108. package/docs/design/families/xychart.md +0 -85
  109. package/docs/design/system/README.md +0 -45
  110. package/docs/design/system/abstraction-audit.md +0 -224
  111. package/docs/design/system/abstraction-recommendations.md +0 -655
  112. package/docs/design/system/architecture.mmd +0 -29
  113. package/docs/design/system/architecture.svg +0 -137
  114. package/docs/design/system/layout-guarantees-and-robustness.md +0 -351
  115. package/docs/design/system/layout-rubric.md +0 -138
  116. package/docs/design/system/route-contracts.md +0 -848
  117. package/docs/design/system/source-preservation-ladder.md +0 -52
  118. package/docs/design/system/styles-rollout.md +0 -216
  119. package/docs/design/system/ugly-layouts.md +0 -119
  120. package/docs/layout-characterization/README.md +0 -245
  121. package/docs/layout-characterization/contact-sheet-families.md +0 -498
  122. package/docs/layout-characterization/contact-sheet.md +0 -638
  123. package/docs/layout-characterization/properties.md +0 -281
  124. package/docs/layout-characterization/visual-quality.md +0 -160
  125. package/docs/layout-characterization/visual-snapshots/architecture.svg +0 -79
  126. package/docs/layout-characterization/visual-snapshots/class.svg +0 -60
  127. package/docs/layout-characterization/visual-snapshots/er.svg +0 -61
  128. package/docs/layout-characterization/visual-snapshots/flowchart.svg +0 -58
  129. package/docs/layout-characterization/visual-snapshots/gantt.svg +0 -52
  130. package/docs/layout-characterization/visual-snapshots/journey.svg +0 -98
  131. package/docs/layout-characterization/visual-snapshots/pie.svg +0 -36
  132. package/docs/layout-characterization/visual-snapshots/quadrant.svg +0 -47
  133. package/docs/layout-characterization/visual-snapshots/sequence.svg +0 -59
  134. package/docs/layout-characterization/visual-snapshots/state.svg +0 -52
  135. package/docs/layout-characterization/visual-snapshots/timeline.svg +0 -64
  136. package/docs/layout-characterization/visual-snapshots/xychart.svg +0 -97
  137. package/docs/project/divergences.md +0 -98
  138. package/docs/project/dogfooding-docs-strategy.md +0 -66
  139. package/docs/project/hosted-mcp-cloudflare-plan.md +0 -338
  140. package/docs/project/lessons-learned.md +0 -1019
  141. package/docs/project/remove-role-styling-plan.md +0 -176
  142. package/examples/agent-improve-auth-flow.ts +0 -206
  143. package/examples/agent-loop.ts +0 -53
  144. package/examples/mcp-vs-cli-complex-diagrams.ts +0 -133
  145. package/llms.txt +0 -104
  146. package/skill-evals/README.md +0 -77
  147. package/skill-evals/fixtures/architecture-cache/input.mmd +0 -5
  148. package/skill-evals/fixtures/class-payment/input.mmd +0 -4
  149. package/skill-evals/fixtures/er-orders/input.mmd +0 -10
  150. package/skill-evals/fixtures/flowchart-cache/input.mmd +0 -3
  151. package/skill-evals/fixtures/gantt-release/input.mmd +0 -7
  152. package/skill-evals/fixtures/journey-checkout/input.mmd +0 -6
  153. package/skill-evals/fixtures/pie-exports/input.mmd +0 -5
  154. package/skill-evals/fixtures/quadrant-priorities/input.mmd +0 -11
  155. package/skill-evals/fixtures/sequence-retry/input.mmd +0 -8
  156. package/skill-evals/fixtures/state-lifecycle/input.mmd +0 -5
  157. package/skill-evals/fixtures/timeline-release/input.mmd +0 -6
  158. package/skill-evals/fixtures/xychart-growth/input.mmd +0 -5
  159. package/skill-evals/shared-benchmark.json +0 -510
  160. package/src/agent/analyze.ts +0 -157
  161. package/src/agent/apply.ts +0 -146
  162. package/src/agent/architecture-body.ts +0 -458
  163. package/src/agent/certificates.ts +0 -110
  164. package/src/agent/class-body.ts +0 -319
  165. package/src/agent/core.ts +0 -207
  166. package/src/agent/create.ts +0 -106
  167. package/src/agent/describe.ts +0 -368
  168. package/src/agent/er-body.ts +0 -224
  169. package/src/agent/facts.ts +0 -360
  170. package/src/agent/families-builtin.ts +0 -920
  171. package/src/agent/families.ts +0 -232
  172. package/src/agent/family-layouts.ts +0 -832
  173. package/src/agent/flowchart-body.ts +0 -372
  174. package/src/agent/flowchart-unsupported.ts +0 -243
  175. package/src/agent/font-coverage.ts +0 -288
  176. package/src/agent/gantt-body.ts +0 -495
  177. package/src/agent/index.ts +0 -10
  178. package/src/agent/journey-body.ts +0 -374
  179. package/src/agent/label-metrics.ts +0 -28
  180. package/src/agent/layout-to-rendered.ts +0 -63
  181. package/src/agent/mutate.ts +0 -97
  182. package/src/agent/mutation-ops.ts +0 -51
  183. package/src/agent/op-schema.ts +0 -443
  184. package/src/agent/parse.ts +0 -223
  185. package/src/agent/pie-body.ts +0 -270
  186. package/src/agent/png.ts +0 -171
  187. package/src/agent/quadrant-body.ts +0 -336
  188. package/src/agent/quality.ts +0 -363
  189. package/src/agent/readability-audit.ts +0 -92
  190. package/src/agent/rendered-route-audit.ts +0 -61
  191. package/src/agent/sequence-body.ts +0 -345
  192. package/src/agent/serialize.ts +0 -214
  193. package/src/agent/state-body.ts +0 -589
  194. package/src/agent/structural-count.ts +0 -150
  195. package/src/agent/timeline-body.ts +0 -280
  196. package/src/agent/trace-log.ts +0 -43
  197. package/src/agent/types.ts +0 -995
  198. package/src/agent/verify.ts +0 -603
  199. package/src/agent/xychart-body.ts +0 -472
  200. package/src/architecture/config.ts +0 -282
  201. package/src/architecture/layout.ts +0 -496
  202. package/src/architecture/parser.ts +0 -375
  203. package/src/architecture/renderer.ts +0 -611
  204. package/src/architecture/types.ts +0 -113
  205. package/src/ascii/ansi.ts +0 -423
  206. package/src/ascii/architecture.ts +0 -210
  207. package/src/ascii/canvas.ts +0 -443
  208. package/src/ascii/class-diagram.ts +0 -697
  209. package/src/ascii/converter.ts +0 -475
  210. package/src/ascii/draw.ts +0 -1693
  211. package/src/ascii/edge-bundling.ts +0 -328
  212. package/src/ascii/edge-routing.ts +0 -330
  213. package/src/ascii/er-diagram.ts +0 -439
  214. package/src/ascii/gantt.ts +0 -276
  215. package/src/ascii/grid.ts +0 -747
  216. package/src/ascii/index.ts +0 -196
  217. package/src/ascii/journey.ts +0 -169
  218. package/src/ascii/meta.ts +0 -244
  219. package/src/ascii/multiline-utils.ts +0 -80
  220. package/src/ascii/pathfinder.ts +0 -301
  221. package/src/ascii/pie.ts +0 -67
  222. package/src/ascii/quadrant.ts +0 -158
  223. package/src/ascii/reverse.ts +0 -216
  224. package/src/ascii/sequence.ts +0 -499
  225. package/src/ascii/shapes/circle.ts +0 -27
  226. package/src/ascii/shapes/corners.ts +0 -143
  227. package/src/ascii/shapes/diamond.ts +0 -27
  228. package/src/ascii/shapes/hexagon.ts +0 -27
  229. package/src/ascii/shapes/index.ts +0 -106
  230. package/src/ascii/shapes/rectangle.ts +0 -168
  231. package/src/ascii/shapes/rounded.ts +0 -27
  232. package/src/ascii/shapes/special.ts +0 -332
  233. package/src/ascii/shapes/stadium.ts +0 -110
  234. package/src/ascii/shapes/state.ts +0 -192
  235. package/src/ascii/shapes/types.ts +0 -73
  236. package/src/ascii/timeline.ts +0 -141
  237. package/src/ascii/types.ts +0 -312
  238. package/src/ascii/validate.ts +0 -120
  239. package/src/ascii/width.ts +0 -81
  240. package/src/ascii/wrap.ts +0 -131
  241. package/src/ascii/xychart.ts +0 -919
  242. package/src/browser.ts +0 -29
  243. package/src/class/layout.ts +0 -240
  244. package/src/class/parser.ts +0 -332
  245. package/src/class/renderer.ts +0 -638
  246. package/src/class/types.ts +0 -129
  247. package/src/cli/agent-instructions.ts +0 -1
  248. package/src/cli/am-bin.ts +0 -6
  249. package/src/cli/exit-codes.ts +0 -18
  250. package/src/cli/index.ts +0 -1132
  251. package/src/cli/init-agent.ts +0 -147
  252. package/src/cli/run-entrypoint.ts +0 -10
  253. package/src/color-resolver.ts +0 -152
  254. package/src/elk-instance.ts +0 -114
  255. package/src/er/layout.ts +0 -187
  256. package/src/er/parser.ts +0 -226
  257. package/src/er/renderer.ts +0 -792
  258. package/src/er/types.ts +0 -99
  259. package/src/family-rubric.ts +0 -425
  260. package/src/font-manifest.ts +0 -31
  261. package/src/gantt/layout.ts +0 -365
  262. package/src/gantt/parser.ts +0 -282
  263. package/src/gantt/pipeline.ts +0 -27
  264. package/src/gantt/renderer.ts +0 -414
  265. package/src/gantt/schedule.ts +0 -513
  266. package/src/gantt/types.ts +0 -255
  267. package/src/index.ts +0 -368
  268. package/src/journey/layout.ts +0 -554
  269. package/src/journey/parse-core.ts +0 -251
  270. package/src/journey/parser.ts +0 -101
  271. package/src/journey/renderer.ts +0 -917
  272. package/src/journey/types.ts +0 -144
  273. package/src/layout/geometry.ts +0 -182
  274. package/src/layout/pass.ts +0 -142
  275. package/src/layout/passes/index.ts +0 -3916
  276. package/src/layout-engine.ts +0 -1565
  277. package/src/layout-rubric.ts +0 -659
  278. package/src/mcp/artifacts.ts +0 -137
  279. package/src/mcp/dynamic-harness.ts +0 -31
  280. package/src/mcp/dynamic-modules.d.ts +0 -7
  281. package/src/mcp/facade.ts +0 -608
  282. package/src/mcp/harness-runtime.ts +0 -203
  283. package/src/mcp/hosted-server.ts +0 -468
  284. package/src/mcp/mcp-bin.ts +0 -3
  285. package/src/mcp/mcp-cli.ts +0 -82
  286. package/src/mcp/protocol.ts +0 -13
  287. package/src/mcp/sandbox.ts +0 -195
  288. package/src/mcp/sdk-decl.ts +0 -391
  289. package/src/mcp/server.ts +0 -362
  290. package/src/mcp/tool-surface.ts +0 -146
  291. package/src/mermaid-source.ts +0 -655
  292. package/src/multiline-utils.ts +0 -228
  293. package/src/parser.ts +0 -1031
  294. package/src/pie/layout.ts +0 -168
  295. package/src/pie/parser.ts +0 -136
  296. package/src/pie/renderer.ts +0 -234
  297. package/src/pie/types.ts +0 -82
  298. package/src/quadrant/layout.ts +0 -191
  299. package/src/quadrant/parser.ts +0 -183
  300. package/src/quadrant/renderer.ts +0 -322
  301. package/src/quadrant/types.ts +0 -113
  302. package/src/render-family-hooks.ts +0 -244
  303. package/src/renderer.ts +0 -1099
  304. package/src/route-contracts.ts +0 -2723
  305. package/src/scene/backend.ts +0 -76
  306. package/src/scene/fidelity.ts +0 -183
  307. package/src/scene/hybrid-backend.ts +0 -174
  308. package/src/scene/ir.ts +0 -181
  309. package/src/scene/marks.ts +0 -127
  310. package/src/scene/rough-backend.ts +0 -378
  311. package/src/scene/seed.ts +0 -46
  312. package/src/scene/style-registry.ts +0 -556
  313. package/src/sequence/layout.ts +0 -456
  314. package/src/sequence/parser.ts +0 -255
  315. package/src/sequence/renderer.ts +0 -604
  316. package/src/sequence/types.ts +0 -154
  317. package/src/shape-clipping.ts +0 -351
  318. package/src/shared/accessibility-directives.ts +0 -22
  319. package/src/shared/batched.ts +0 -61
  320. package/src/shared/color-math.ts +0 -93
  321. package/src/shared/svg-a11y.ts +0 -29
  322. package/src/shared/syntax-error.ts +0 -17
  323. package/src/shared/unicode-ranges.ts +0 -135
  324. package/src/styles.ts +0 -318
  325. package/src/svg-paths.ts +0 -28
  326. package/src/text-metrics.ts +0 -248
  327. package/src/theme.ts +0 -710
  328. package/src/timeline/layout.ts +0 -381
  329. package/src/timeline/parser.ts +0 -215
  330. package/src/timeline/renderer.ts +0 -538
  331. package/src/timeline/types.ts +0 -105
  332. package/src/types.ts +0 -462
  333. package/src/website-worker-modules.d.ts +0 -18
  334. package/src/xychart/axis-utils.ts +0 -109
  335. package/src/xychart/colors.ts +0 -124
  336. package/src/xychart/config.ts +0 -88
  337. package/src/xychart/layout.ts +0 -656
  338. package/src/xychart/parser.ts +0 -504
  339. package/src/xychart/renderer.ts +0 -640
  340. package/src/xychart/types.ts +0 -282
@@ -1,1102 +0,0 @@
1
- type MermaidConfigScalar = string | number | boolean | null;
2
- type MermaidConfigValue = MermaidConfigScalar | MermaidConfigValue[] | MermaidConfigMap;
3
- interface MermaidConfigMap {
4
- [key: string]: MermaidConfigValue | undefined;
5
- }
6
- interface MermaidFrontmatterMap extends MermaidConfigMap {
7
- }
8
- interface MermaidThemeVariables extends MermaidConfigMap {
9
- fontFamily?: string;
10
- }
11
- interface TimelineRuntimeConfig extends MermaidConfigMap {
12
- disableMulticolor?: boolean;
13
- sectionFills?: string[];
14
- sectionColours?: string[];
15
- }
16
- interface JourneyRuntimeConfig extends MermaidConfigMap {
17
- diagramMarginX?: number;
18
- diagramMarginY?: number;
19
- leftMargin?: number;
20
- maxLabelWidth?: number;
21
- width?: number;
22
- height?: number;
23
- boxMargin?: number;
24
- boxTextMargin?: number;
25
- noteMargin?: number;
26
- messageMargin?: number;
27
- messageAlign?: 'left' | 'center' | 'right';
28
- bottomMarginAdj?: number;
29
- useMaxWidth?: boolean;
30
- rightAngles?: boolean;
31
- taskFontSize?: string | number;
32
- taskFontFamily?: string;
33
- taskMargin?: number;
34
- activationWidth?: number;
35
- textPlacement?: string;
36
- actorColours?: string[];
37
- sectionFills?: string[];
38
- sectionColours?: string[];
39
- titleColor?: string;
40
- titleFontFamily?: string;
41
- titleFontSize?: string | number;
42
- }
43
- interface GanttRuntimeConfig extends MermaidConfigMap {
44
- displayMode?: string;
45
- }
46
- interface MermaidRuntimeConfig extends MermaidConfigMap {
47
- theme?: string;
48
- fontFamily?: string;
49
- themeVariables?: MermaidThemeVariables;
50
- timeline?: TimelineRuntimeConfig;
51
- journey?: JourneyRuntimeConfig;
52
- xyChart?: MermaidConfigMap;
53
- gantt?: GanttRuntimeConfig;
54
- useMaxWidth?: boolean;
55
- useWidth?: number;
56
- themeCSS?: string;
57
- }
58
- interface NormalizedMermaidSource {
59
- text: string;
60
- body: string;
61
- lines: string[];
62
- firstLine: string;
63
- config: MermaidRuntimeConfig;
64
- frontmatter: MermaidFrontmatterMap;
65
- }
66
-
67
- interface DiagramColors {
68
- /** Background color → CSS variable --bg */
69
- bg: string;
70
- /** Foreground / primary text color → CSS variable --fg */
71
- fg: string;
72
- /** Edge/connector color → CSS variable --line */
73
- line?: string;
74
- /** Arrow heads, highlights, special nodes → CSS variable --accent */
75
- accent?: string;
76
- /** Secondary text, edge labels → CSS variable --muted */
77
- muted?: string;
78
- /** Node/box fill tint → CSS variable --surface */
79
- surface?: string;
80
- /** Node/group stroke color → CSS variable --border */
81
- border?: string;
82
- /** Optional explicit drop shadows on node shapes. Default: false */
83
- shadow?: boolean;
84
- /**
85
- * Font family for all text. Emitted on the SVG root as `--font`, so the family
86
- * stays overridable post-render via inline style. Default: 'Inter'.
87
- *
88
- * Accepts a plain family name ('Inter'), a CSS variable reference
89
- * ('var(--brand-font)'), or a multi-family stack ('Inter, system-ui').
90
- * Only plain names get a Google Fonts `@import`; var() references and
91
- * stacks are emitted as-is (unquoted) and never fetched.
92
- */
93
- font?: string;
94
- /**
95
- * Whether to embed the Google Fonts `@import` line in the SVG `<style>` block.
96
- * Default: `true` (preserves wire compatibility with all existing consumers).
97
- *
98
- * CLI / PNG paths set `false` explicitly to render offline / CSP-friendly.
99
- * The CSS variable `--font` is always emitted on the SVG root regardless,
100
- * so the family stays overridable post-render even when the @import is gone.
101
- */
102
- embedFontImport?: boolean;
103
- }
104
- /** Default bg/fg when no colors are provided (zinc light) */
105
- declare const DEFAULTS: Readonly<{
106
- bg: string;
107
- fg: string;
108
- }>;
109
- declare const THEMES: Record<string, DiagramColors>;
110
- type ThemeName = keyof typeof THEMES;
111
- /**
112
- * Minimal subset of Shiki's ThemeRegistrationResolved that we need.
113
- * We don't import from shiki to avoid a hard dependency.
114
- */
115
- interface ShikiThemeLike {
116
- type?: string;
117
- colors?: Record<string, string>;
118
- tokenColors?: Array<{
119
- scope?: string | string[];
120
- settings?: {
121
- foreground?: string;
122
- };
123
- }>;
124
- }
125
- /**
126
- * Extract diagram colors from a Shiki theme object.
127
- * Works with any VS Code / TextMate theme loaded by Shiki.
128
- *
129
- * Maps editor UI colors to diagram roles:
130
- * editor.background → bg
131
- * editor.foreground → fg
132
- * editorLineNumber.fg → line (optional)
133
- * focusBorder / keyword → accent (optional)
134
- * comment token → muted (optional)
135
- * editor.selectionBackground→ surface (optional)
136
- * editorWidget.border → border (optional)
137
- *
138
- * @example
139
- * ```ts
140
- * import { getSingletonHighlighter } from 'shiki'
141
- * import { fromShikiTheme } from 'agentic-mermaid'
142
- *
143
- * const hl = await getSingletonHighlighter({ themes: ['tokyo-night'] })
144
- * const colors = fromShikiTheme(hl.getTheme('tokyo-night'))
145
- * const svg = renderMermaidSVG(code, colors)
146
- * ```
147
- */
148
- declare function fromShikiTheme(theme: ShikiThemeLike): DiagramColors;
149
- /**
150
- * All derived diagram colors resolved to concrete hex values.
151
- * Mirrors the CSS variable derivation system in buildStyleBlock().
152
- */
153
- interface ResolvedColors {
154
- bg: string;
155
- fg: string;
156
- text: string;
157
- textSec: string;
158
- textMuted: string;
159
- textFaint: string;
160
- line: string;
161
- arrow: string;
162
- nodeFill: string;
163
- nodeStroke: string;
164
- groupFill: string;
165
- groupHdr: string;
166
- innerStroke: string;
167
- keyBadge: string;
168
- }
169
- /**
170
- * Resolve all derived colors from a DiagramColors to concrete hex values.
171
- * Implements the same logic as the CSS color-mix() derivations in buildStyleBlock().
172
- */
173
- declare function resolveColors(colors: DiagramColors): ResolvedColors;
174
- /**
175
- * Resolve all CSS var() and color-mix() expressions in an SVG string to
176
- * concrete hex color values. This makes the SVG render correctly in
177
- * non-browser renderers (resvg, librsvg, etc.) that don't support CSS
178
- * custom properties or color-mix().
179
- *
180
- * Operates via iterative string replacement:
181
- * 1. Replace var(--name) with known resolved values
182
- * 2. Replace var(--name, fallback) — use value if known, else fallback
183
- * 3. Resolve color-mix(in srgb, #hex P%, #hex) to computed hex
184
- * 4. Extract CSS variable definitions from <style> and resolve remaining refs
185
- * 5. Repeat until stable
186
- *
187
- * When bg/fg are not hex colors (e.g. CSS variable strings for live theming),
188
- * the SVG is returned as-is since resolution isn't possible.
189
- */
190
- declare function inlineResolvedColors(svg: string, colors: DiagramColors): string;
191
-
192
- interface ArchitectureVisualConfig {
193
- groupHeaderHeight: number;
194
- groupFontSize: number;
195
- groupFontWeight: number;
196
- groupLetterSpacing: number;
197
- groupFont?: string;
198
- groupTextTransform?: TextTransform;
199
- groupPaddingX: number;
200
- groupPaddingY: number;
201
- groupLabelPaddingX: number;
202
- groupCornerRadius: number;
203
- groupLineWidth: number;
204
- groupText?: string;
205
- serviceFontSize: number;
206
- serviceFontWeight: number;
207
- serviceLetterSpacing: number;
208
- serviceTextTransform?: TextTransform;
209
- servicePaddingX: number;
210
- servicePaddingY: number;
211
- serviceCornerRadius: number;
212
- serviceLineWidth: number;
213
- serviceText?: string;
214
- edgeFontSize: number;
215
- edgeFontWeight: number;
216
- edgeLetterSpacing: number;
217
- edgeTextTransform?: TextTransform;
218
- edgeLineWidth: number;
219
- edgeBendRadius: number;
220
- edgeStroke?: string;
221
- edgeText?: string;
222
- iconSize: number;
223
- serviceIconSize: number;
224
- junctionOuterRadius: number;
225
- junctionInnerRadius: number;
226
- groupSurface?: string;
227
- groupHeaderSurface?: string;
228
- groupBorder?: string;
229
- serviceSurface?: string;
230
- serviceBorder?: string;
231
- }
232
-
233
- /** A partial, composable public description of how diagrams look. */
234
- interface StyleSpec {
235
- /** Optional JSON Schema pointer for file-backed styles. Ignored at render time. */
236
- $schema?: string;
237
- name?: string;
238
- blurb?: string;
239
- /** Palette — the seven tokens every mark references. A colors-only style
240
- * is a theme. User themeVariables/color options still win over these. */
241
- colors?: {
242
- bg?: string;
243
- fg?: string;
244
- line?: string;
245
- accent?: string;
246
- muted?: string;
247
- surface?: string;
248
- border?: string;
249
- };
250
- /** Font family default (threaded through the --font CSS variable). PNG
251
- * export needs the family bundled or resolvable by the rasterizer. */
252
- font?: string;
253
- /** Stroke rendering: 'crisp' (default), 'jittered' rough.js strokes, or
254
- * 'freehand' pressure-ribbon strokes. */
255
- stroke?: 'crisp' | 'jittered' | 'freehand';
256
- roughness?: number;
257
- bowing?: number;
258
- /** 1 = single stroke (disableMultiStroke), 2 = sketchy double stroke. */
259
- passes?: number;
260
- strokeWidth?: number;
261
- fill?: 'none' | 'hachure' | 'solid' | 'wash';
262
- hachureAngle?: number;
263
- hachureGap?: number;
264
- fillWeight?: number;
265
- /** Wash fill glaze opacity / edge-darkening opacity (fill: 'wash'). */
266
- washOpacity?: number;
267
- washEdge?: number;
268
- /** Flat page furniture drawn right after the document prelude. */
269
- backdrop?: 'plain' | 'paper-ruled' | 'grid';
270
- /** Expert override only — normally inferred by inferBackend(). */
271
- backend?: 'default' | 'rough' | 'hybrid';
272
- intent?: 'premium' | 'draft' | 'lofi';
273
- /** §3.8 monochrome contract: tone via shading/weight, never extra hues. */
274
- mono?: boolean;
275
- }
276
- /** What RenderOptions.style accepts: a registered name, an inline spec, or a
277
- * stack of either (merged left → right). */
278
- type StyleInput = string | StyleSpec;
279
- declare function registerStyle(spec: StyleSpec): void;
280
- declare function getStyle(name: string): StyleSpec | undefined;
281
- declare function knownStyles(): string[];
282
- /** Which backend a style needs, derived from what it asks for — authors
283
- * describe the look, the engine picks the machinery. */
284
- declare function inferBackend(spec: StyleSpec): 'default' | 'rough' | 'hybrid';
285
- declare function resolveStyleStack(input: StyleInput | StyleInput[] | undefined): StyleSpec | undefined;
286
- /** Validate an untrusted (e.g. JSON) style record. Returns human-readable
287
- * problems; [] means the record is a usable StyleSpec. Declarative-only by
288
- * construction — there is no field that can carry markup or URLs. */
289
- declare function validateStyleSpec(value: unknown): string[];
290
-
291
- interface MermaidGraph {
292
- direction: Direction;
293
- nodes: Map<string, MermaidNode>;
294
- edges: MermaidEdge[];
295
- subgraphs: MermaidSubgraph[];
296
- classDefs: Map<string, Record<string, string>>;
297
- /** Maps node IDs to their class names (from `class X className` or `:::className` shorthand) */
298
- classAssignments: Map<string, string>;
299
- /** Maps node IDs to inline styles (from `style X fill:#f00,stroke:#333`) */
300
- nodeStyles: Map<string, Record<string, string>>;
301
- /** Maps edge indices (or 'default') to inline styles from `linkStyle` directives */
302
- linkStyles: Map<number | 'default', Record<string, string>>;
303
- }
304
- type Direction = 'TD' | 'TB' | 'LR' | 'BT' | 'RL';
305
- interface MermaidNode {
306
- id: string;
307
- label: string;
308
- shape: NodeShape;
309
- }
310
- type NodeShape = 'rectangle' | 'service' | 'rounded' | 'diamond' | 'stadium' | 'circle' | 'subroutine' | 'doublecircle' | 'hexagon' | 'cylinder' | 'asymmetric' | 'trapezoid' | 'trapezoid-alt' | 'lean-r' | 'lean-l' | 'state-start' | 'state-end';
311
- interface MermaidEdge {
312
- source: string;
313
- target: string;
314
- label?: string;
315
- style: EdgeStyle;
316
- /** Whether to render a marker at the start (source end) of the edge */
317
- hasArrowStart: boolean;
318
- /** Whether to render a marker at the end (target end) of the edge */
319
- hasArrowEnd: boolean;
320
- /** Marker shape at start when hasArrowStart=true. Defaults to 'arrow' if undefined. */
321
- startMarker?: EdgeMarker;
322
- /** Marker shape at end when hasArrowEnd=true. Defaults to 'arrow' if undefined. */
323
- endMarker?: EdgeMarker;
324
- /** Mermaid link length (rank-distance intent): 1 = base operator, 2 = one
325
- * extra shaft unit (`--->`, `-..->`, `====>`, `~~~~`), etc. Undefined ≡ 1,
326
- * so base-form edges serialize byte-identically. Preserved through
327
- * round-trip; layout honors this conservatively for simple primary-forward
328
- * no-subgraph DAGs and leaves grouped/cyclic cases to ELK. */
329
- length?: number;
330
- }
331
- /** 'invisible' is Mermaid's `~~~` link: it participates in layout ordering
332
- * but draws no stroke. */
333
- type EdgeStyle = 'solid' | 'dotted' | 'thick' | 'invisible';
334
- type EdgeMarker = 'arrow' | 'circle' | 'cross';
335
- interface MermaidSubgraph {
336
- id: string;
337
- label: string;
338
- nodeIds: string[];
339
- children: MermaidSubgraph[];
340
- /** Optional direction override for this subgraph's internal layout */
341
- direction?: Direction;
342
- }
343
- interface PositionedDiagram {
344
- width: number;
345
- height: number;
346
- }
347
- interface RenderContext<TPositioned extends PositionedDiagram = PositionedDiagram> {
348
- positioned: TPositioned;
349
- colors: DiagramColors;
350
- options: RenderOptions;
351
- }
352
- interface PositionedGraph extends PositionedDiagram {
353
- width: number;
354
- height: number;
355
- nodes: PositionedNode[];
356
- edges: PositionedEdge[];
357
- groups: PositionedGroup[];
358
- }
359
- interface PositionedNode {
360
- id: string;
361
- label: string;
362
- shape: NodeShape;
363
- x: number;
364
- y: number;
365
- width: number;
366
- height: number;
367
- /** Inline styles resolved from classDef + explicit `style` statements — override theme defaults */
368
- inlineStyle?: Record<string, string>;
369
- /** User-assigned Mermaid class names (from `class X myClass` / `:::myClass`). Emitted as SVG CSS classes so external stylesheets can target them. */
370
- classNames?: string[];
371
- }
372
- interface PositionedEdge {
373
- source: string;
374
- target: string;
375
- label?: string;
376
- style: EdgeStyle;
377
- hasArrowStart: boolean;
378
- hasArrowEnd: boolean;
379
- /** Marker shape at start when hasArrowStart=true. Defaults to 'arrow' if undefined. */
380
- startMarker?: EdgeMarker;
381
- /** Marker shape at end when hasArrowEnd=true. Defaults to 'arrow' if undefined. */
382
- endMarker?: EdgeMarker;
383
- /** Full path including bends — array of {x, y} points */
384
- points: Point[];
385
- /** Layout-computed label center position (avoids label-label collisions) */
386
- labelPosition?: Point;
387
- /** Inline styles resolved from `linkStyle` directives — override theme defaults */
388
- inlineStyle?: Record<string, string>;
389
- /** Index into MermaidGraph.edges this positioned edge was extracted from */
390
- edgeIndex?: number;
391
- /** Route contract certificate attached by the layout pipeline (docs/design/system/route-contracts.md) */
392
- routeCertificate?: RouteCertificate;
393
- }
394
- type RouteClass = 'primary-forward' | 'feedback' | 'self-loop' | 'container' | 'cross-hierarchy';
395
- type LayoutRouteClass = RouteClass | 'family-layout';
396
- /** The four canonical connection points of a shape (Visio connection-point /
397
- * yFiles port-candidate model). For every Mermaid shape these lie at the
398
- * bbox side midpoints: the diamond's vertices, the rectangle's side
399
- * midpoints, and the boundary extremes of circles, stadiums, hexagons and
400
- * cylinders are the same four points, because each shape is symmetric and
401
- * inscribed in its bbox. */
402
- type PortSide = 'N' | 'E' | 'S' | 'W';
403
- /** Diamond facet-midpoints: the four points halfway along each slanted edge
404
- * (NE/SE/SW/NW). They lie exactly on the diamond outline and serve as
405
- * designated attachment points alongside the four cardinal vertices, but are
406
- * diamond-only — shapePorts() stays four-cardinal for every shape. */
407
- type DiamondFacet = 'NE' | 'SE' | 'SW' | 'NW';
408
- /** A port an endpoint may sit on: a cardinal vertex/side-midpoint, or — on a
409
- * diamond — a facet-midpoint. */
410
- type AnyPort = PortSide | DiamondFacet;
411
- type PortSemanticRole = 'flow-source' | 'flow-target' | 'feedback-source' | 'feedback-target' | 'self-loop-source' | 'self-loop-target' | 'container-source' | 'container-target' | 'cross-hierarchy-source' | 'cross-hierarchy-target';
412
- /** Dynamic port allocation metadata: which side an endpoint semantically uses,
413
- * its deterministic order among the endpoints on that side, and why it is
414
- * there. This extends `sourcePort`/`targetPort` without changing their V1
415
- * vocabulary: exact endpoint ports remain `AnyPort`, while the allocation
416
- * records side-level slot/role intent for pre-layout and debugging. */
417
- interface RoutePortAssignment {
418
- side: PortSide;
419
- /** 0-based deterministic order along the side (N/S: left→right; E/W: top→bottom). */
420
- slotIndex: number;
421
- /** Number of endpoints allocated to this node side. */
422
- slotCount: number;
423
- role: PortSemanticRole;
424
- /** Exact designated port when the final endpoint landed on one. */
425
- port?: AnyPort;
426
- }
427
- interface RouteBlocker {
428
- kind: 'node' | 'label' | 'channel' | 'span' | 'crossing' | 'port';
429
- id: string;
430
- }
431
- type RouteInvariant = 'straight' | 'explained-detour' | 'bundle' | 'outer-feedback' | 'feedback-detour' | 'self-loop' | 'container-attach' | 'unverified-shape';
432
- interface RouteCertificateBase {
433
- /** Index into MermaidGraph.edges */
434
- edgeIndex: number;
435
- routeClass: RouteClass;
436
- bendCount: number;
437
- directLaneClear?: boolean;
438
- directLaneBlockedBy?: RouteBlocker[];
439
- /** Set when the endpoint sits exactly on a port: a cardinal side-midpoint
440
- * for every shape, or a diamond facet-midpoint (NE/SE/SW/NW). */
441
- sourcePort?: AnyPort;
442
- /** Set when the endpoint sits exactly on a port: a cardinal side-midpoint
443
- * for every shape, or a diamond facet-midpoint (NE/SE/SW/NW). */
444
- targetPort?: AnyPort;
445
- /** Dynamic side/slot/role allocation for the source endpoint. */
446
- sourcePortAssignment?: RoutePortAssignment;
447
- /** Dynamic side/slot/role allocation for the target endpoint. */
448
- targetPortAssignment?: RoutePortAssignment;
449
- }
450
- type StraightRouteCertificate = RouteCertificateBase & {
451
- invariant: 'straight';
452
- /** True when the certifying straightener collapsed this route */
453
- straightened?: true;
454
- };
455
- type NonStraightRouteCertificate = RouteCertificateBase & {
456
- invariant: Exclude<RouteInvariant, 'straight'>;
457
- /** Non-straight certificates cannot claim a straightening happened. */
458
- straightened?: never;
459
- };
460
- type RouteCertificate = StraightRouteCertificate | NonStraightRouteCertificate;
461
- type FamilyEdgeRouteCertificate = {
462
- family: 'class' | 'er';
463
- edgeIndex: number;
464
- routeClass: 'family-layout';
465
- invariant: 'orthogonal-box' | 'unverified-family-route';
466
- bendCount: number;
467
- orthogonal: boolean;
468
- sourceBoundary: boolean;
469
- targetBoundary: boolean;
470
- } | {
471
- family: 'architecture';
472
- edgeIndex: number;
473
- routeClass: 'family-layout';
474
- invariant: 'side-anchored' | 'unverified-family-route';
475
- bendCount: number;
476
- orthogonal: boolean;
477
- sourceSide: 'L' | 'R' | 'T' | 'B';
478
- targetSide: 'L' | 'R' | 'T' | 'B';
479
- sourceBoundary: 'item' | 'group';
480
- targetBoundary: 'item' | 'group';
481
- sourceAnchored: boolean;
482
- targetAnchored: boolean;
483
- } | {
484
- family: 'sequence';
485
- edgeIndex: number;
486
- routeClass: 'family-layout';
487
- invariant: 'lifeline-message' | 'self-message' | 'unverified-family-route';
488
- bendCount: number;
489
- horizontal: boolean;
490
- sourceLifeline: boolean;
491
- targetLifeline: boolean;
492
- selfMessage: boolean;
493
- };
494
- type RegionContainmentCertificate = {
495
- family: 'timeline' | 'xychart' | 'pie' | 'quadrant' | 'gantt';
496
- elementId: string;
497
- routeClass: 'family-layout';
498
- invariant: 'timeline-interval' | 'plot-contained' | 'legend-contained' | 'section-contained' | 'unverified-family-layout';
499
- /** Node/mark box in layout coordinates; included so cert consumers do not have to join back to nodes. */
500
- bounds: {
501
- x: number;
502
- y: number;
503
- w: number;
504
- h: number;
505
- };
506
- /** Center point used by plot/region-mark containment certs. */
507
- center: {
508
- x: number;
509
- y: number;
510
- };
511
- /** Whether the cert proves the full box or the semantic mark center is contained. */
512
- containment: 'bounds' | 'center';
513
- withinBounds: boolean;
514
- groupId?: string;
515
- withinGroup?: boolean;
516
- };
517
- type EdgeRouteCertificate = RouteCertificate | FamilyEdgeRouteCertificate;
518
- type FamilyRouteCertificate = FamilyEdgeRouteCertificate | RegionContainmentCertificate;
519
- type LayoutRouteCertificate = EdgeRouteCertificate | RegionContainmentCertificate;
520
- interface Point {
521
- x: number;
522
- y: number;
523
- }
524
- interface PositionedGroup {
525
- id: string;
526
- label: string;
527
- x: number;
528
- y: number;
529
- width: number;
530
- height: number;
531
- children: PositionedGroup[];
532
- }
533
- type TextTransform = 'uppercase' | 'lowercase' | 'capitalize';
534
- interface RenderOptions {
535
- /** Background color → CSS variable --bg. Default: '#FFFFFF' */
536
- bg?: string;
537
- /** Foreground / primary text color → CSS variable --fg. Default: '#27272A' */
538
- fg?: string;
539
- /** Edge/connector color → CSS variable --line */
540
- line?: string;
541
- /** Arrow heads, highlights → CSS variable --accent */
542
- accent?: string;
543
- /** Secondary text, edge labels → CSS variable --muted */
544
- muted?: string;
545
- /** Node/box fill tint → CSS variable --surface */
546
- surface?: string;
547
- /** Node/group stroke color → CSS variable --border */
548
- border?: string;
549
- /** Font family for all text. Default: 'Inter' */
550
- font?: string;
551
- /**
552
- * How the diagram looks: a registered style name ('hand-drawn', 'tufte',
553
- * any THEMES palette name like 'dracula'), an inline StyleSpec, or a STACK
554
- * of either merged left-to-right ({ style: ['hand-drawn', 'dracula'] } is
555
- * hand-drawn geometry with the dracula palette). A colors-only style is a
556
- * palette.
557
- * Precedence: defaults < style stack < themeVariables < explicit color
558
- * options. Unknown names throw. Unset (or 'crisp') = the default renderer,
559
- * byte-identical to previous releases.
560
- */
561
- style?: StyleInput | StyleInput[];
562
- /** Canvas padding in px. Default: 40 */
563
- padding?: number;
564
- /** Horizontal spacing between sibling nodes. Default: 24 */
565
- nodeSpacing?: number;
566
- /** Vertical spacing between layers. Default: 40 */
567
- layerSpacing?: number;
568
- /** Spacing between disconnected components. Default: nodeSpacing (24) */
569
- componentSpacing?: number;
570
- /** Render with transparent background (no background style on SVG). Default: false */
571
- transparent?: boolean;
572
- /** Enable hover tooltips on chart data points (xychart only). Default: false */
573
- interactive?: boolean;
574
- /** Optional explicit drop shadows on node shapes. Default: false */
575
- shadow?: boolean;
576
- /** Family-specific SVG renderer options for architecture-beta diagrams. */
577
- architecture?: {
578
- visual?: ArchitectureVisualConfig;
579
- };
580
- /** Family-specific SVG renderer options for user-journey diagrams. */
581
- journey?: {
582
- /**
583
- * Draw the experience-curve line connecting score markers in task order.
584
- * Default: `true`. Set `false` for the marker-only Mermaid-classic look.
585
- */
586
- experienceCurve?: boolean;
587
- };
588
- /** Optional Mermaid-style runtime config (analogous to initialize/frontmatter config). */
589
- mermaidConfig?: MermaidRuntimeConfig;
590
- /**
591
- * Whether to embed the Google Fonts `@import` line in the SVG `<style>` block.
592
- * Default: `true` (preserves wire compatibility with all existing consumers).
593
- *
594
- * CLI / PNG paths set `false` explicitly to render offline / CSP-friendly.
595
- * The CSS variable `--font` is always emitted on the SVG root regardless,
596
- * so the family stays overridable post-render even when the @import is gone.
597
- */
598
- embedFontImport?: boolean;
599
- /**
600
- * Compact SVG output. Default `false`. When true:
601
- * - Numeric coords with 3+ fractional digits are rounded (via `roundCoord`).
602
- * - Newlines between SVG elements are collapsed (whitespace inside `<style>`
603
- * is preserved so CSS declarations don't break).
604
- * - `data-*` and `class=` attributes are preserved (agent inspection hooks).
605
- *
606
- * Typical reduction: 30-40% of bytes on flowchart graphs. Useful for the
607
- * PNG render path (no need for human-readable SVG) and for bandwidth-
608
- * sensitive consumers.
609
- */
610
- compact?: boolean;
611
- /**
612
- * Namespace prefix for all generated SVG def ids (markers, filters) and
613
- * their `url(#…)` references. Default '' = current behavior (back-compat,
614
- * zero snapshot churn). Set a distinct prefix per diagram when rendering
615
- * multiple diagrams onto one HTML page so their `<defs>` don't collide
616
- * (e.g. two `arrowhead` markers — the browser dedupes by id and the second
617
- * diagram's arrows break). `am batch` auto-assigns per-line prefixes.
618
- * Must be deterministic per call site to preserve render determinism.
619
- */
620
- idPrefix?: string;
621
- /**
622
- * Security posture for the rendered output. Default `'default'`.
623
- * `'strict'` (agent / untrusted-diagram mode): guarantees no external-fetch
624
- * references in the SVG — forces `embedFontImport` off (no Google Fonts
625
- * `@import`), so the SVG renders with no network calls. The `--font` CSS
626
- * variable still declares the family. Use `verifyNoExternalRefs(svg)` to
627
- * assert the guarantee. Agent/untrusted SVG callers should opt into strict
628
- * mode explicitly. See SECURITY.md.
629
- */
630
- security?: 'default' | 'strict';
631
- /**
632
- * Explicit "today" for the Gantt `todayMarker` (a date in the diagram's
633
- * `dateFormat`, or ISO `YYYY-MM-DD`). Gantt rendering never reads the wall
634
- * clock; without this value the today marker is simply not drawn, and
635
- * `todayMarker off` disables it even when a clock is supplied.
636
- */
637
- ganttToday?: string;
638
- /**
639
- * Deterministic re-roll seed for stochastic styles.
640
- * The same source + options + seed always produces identical bytes; it
641
- * re-rolls ink wobble only — layout never moves. The crisp path ignores
642
- * it. Default 0.
643
- */
644
- seed?: number;
645
- }
646
-
647
- /**
648
- * The internal color waist: every public color dialect is normalized to
649
- * DiagramColors before layout/render code sees it.
650
- */
651
- declare function resolveDiagramColors(options: RenderOptions, config: MermaidRuntimeConfig, font?: string): DiagramColors;
652
-
653
- /**
654
- * Parse Mermaid text into a logical graph structure.
655
- * Auto-detects diagram type (flowchart or state diagram).
656
- * Throws on invalid/unsupported input.
657
- */
658
- declare function parseMermaid(text: string): MermaidGraph;
659
-
660
- /** Configuration for ASCII rendering. */
661
- interface AsciiConfig {
662
- /** true = ASCII chars (+,-,|), false = Unicode box-drawing (┌,─,│). Default: false */
663
- useAscii: boolean;
664
- /** Horizontal spacing between nodes. Default: 5 */
665
- paddingX: number;
666
- /** Vertical spacing between nodes. Default: 5 */
667
- paddingY: number;
668
- /** Padding inside node boxes. Default: 1 */
669
- boxBorderPadding: number;
670
- /** Graph direction: "LR" or "TD". */
671
- graphDirection: 'LR' | 'TD';
672
- }
673
- /**
674
- * Theme colors for ASCII output — hex color strings.
675
- * Derived from the SVG theme system for visual consistency.
676
- */
677
- interface AsciiTheme {
678
- /** Text color (node labels, edge labels) */
679
- fg: string;
680
- /** Box border color (node borders, subgraph borders) */
681
- border: string;
682
- /** Edge line color (paths between nodes) */
683
- line: string;
684
- /** Arrowhead color (▲▼◄► or ^v<>) */
685
- arrow: string;
686
- /** Theme accent color (optional, used by xycharts for series 0) */
687
- accent?: string;
688
- /** Background color (optional, used by xycharts for dark-mode-aware shading) */
689
- bg?: string;
690
- /** Corner character color (optional, defaults to line) */
691
- corner?: string;
692
- /** Junction character color (optional, defaults to border) */
693
- junction?: string;
694
- }
695
- /** Color mode for output. */
696
- type ColorMode = 'none' | 'ansi16' | 'ansi256' | 'truecolor' | 'html';
697
-
698
- interface AsciiRenderOptions {
699
- /** true = ASCII chars (+,-,|,>), false = Unicode box-drawing (┌,─,│,►). Default: false */
700
- useAscii?: boolean;
701
- /** Horizontal spacing between nodes. Default: 5 */
702
- paddingX?: number;
703
- /** Vertical spacing between nodes. Default: 5 */
704
- paddingY?: number;
705
- /** Padding inside node boxes. Default: 1 */
706
- boxBorderPadding?: number;
707
- /**
708
- * Color mode for output.
709
- * - 'none': No colors (plain text)
710
- * - 'auto': Auto-detect (terminal ANSI capabilities, or HTML in browsers)
711
- * - 'ansi16': 16-color ANSI
712
- * - 'ansi256': 256-color xterm
713
- * - 'truecolor': 24-bit RGB
714
- * - 'html': HTML <span> tags with inline color styles (for browser rendering)
715
- * Default: 'auto'
716
- */
717
- colorMode?: ColorMode | 'auto';
718
- /** Theme colors for ASCII output. Uses default theme if not provided. */
719
- theme?: Partial<AsciiTheme>;
720
- /** Optional Mermaid-style runtime config (analogous to initialize/frontmatter config). */
721
- mermaidConfig?: MermaidRuntimeConfig;
722
- /**
723
- * Loop 9 M13: cap output width in characters. When set, node labels wrap
724
- * at word boundaries to fit within `maxWidth / 3` per node. Single words
725
- * longer than `maxWidth / 2` render anyway (with a console.warn). The
726
- * overall canvas may still exceed `maxWidth` if the diagram has many
727
- * parallel columns; this is best-effort wrapping, not hard truncation.
728
- */
729
- maxWidth?: number;
730
- /**
731
- * Explicit "today" for the Gantt todayMarker (date in the diagram's
732
- * dateFormat or ISO YYYY-MM-DD). Gantt never reads the wall clock; without
733
- * this the marker is not drawn.
734
- */
735
- ganttToday?: string;
736
- }
737
- /**
738
- * Render Mermaid diagram text to an ASCII/Unicode string.
739
- *
740
- * Synchronous — no async layout engine needed (unlike the SVG renderer).
741
- * Auto-detects diagram type from the header line and dispatches to
742
- * the appropriate renderer.
743
- *
744
- * @param text - Mermaid source text (any supported diagram type)
745
- * @param options - Rendering options
746
- * @returns Multi-line ASCII/Unicode string
747
- *
748
- * @example
749
- * ```ts
750
- * const result = renderMermaidAscii(`
751
- * graph LR
752
- * A --> B --> C
753
- * `, { useAscii: true })
754
- *
755
- * // Output:
756
- * // +---+ +---+ +---+
757
- * // | | | | | |
758
- * // | A |---->| B |---->| C |
759
- * // | | | | | |
760
- * // +---+ +---+ +---+
761
- * ```
762
- */
763
- declare function renderMermaidASCII(text: string, options?: AsciiRenderOptions): string;
764
- /** @deprecated Use `renderMermaidASCII` */
765
- declare const renderMermaidAscii: typeof renderMermaidASCII;
766
-
767
- type ArchitectureSide = 'L' | 'R' | 'T' | 'B';
768
- type ArchitectureEndpointBoundary = 'item' | 'group';
769
- interface ArchitectureChildRef {
770
- kind: 'group' | 'service' | 'junction';
771
- id: string;
772
- }
773
- interface ArchitectureGroup {
774
- id: string;
775
- label: string;
776
- icon?: string;
777
- parentId?: string;
778
- children: ArchitectureChildRef[];
779
- }
780
- interface ArchitectureService {
781
- id: string;
782
- label: string;
783
- icon?: string;
784
- parentId?: string;
785
- }
786
- interface ArchitectureJunction {
787
- id: string;
788
- parentId?: string;
789
- }
790
- interface ArchitectureEndpoint {
791
- id: string;
792
- side: ArchitectureSide;
793
- boundary: ArchitectureEndpointBoundary;
794
- }
795
- interface ArchitectureEdge {
796
- source: ArchitectureEndpoint;
797
- target: ArchitectureEndpoint;
798
- label?: string;
799
- hasArrowStart: boolean;
800
- hasArrowEnd: boolean;
801
- }
802
- interface ArchitectureDiagram {
803
- groups: ArchitectureGroup[];
804
- services: ArchitectureService[];
805
- junctions: ArchitectureJunction[];
806
- edges: ArchitectureEdge[];
807
- rootChildren: ArchitectureChildRef[];
808
- accessibilityTitle?: string;
809
- accessibilityDescription?: string;
810
- }
811
-
812
- declare function parseArchitectureDiagram(lines: string[]): ArchitectureDiagram;
813
- declare function architectureToMermaidGraph(diagram: ArchitectureDiagram): MermaidGraph;
814
-
815
- /**
816
- * Measure the pixel width of a text string.
817
- *
818
- * Uses character class buckets for more accurate width estimation
819
- * than uniform character width assumptions.
820
- *
821
- * @param text - The text to measure
822
- * @param fontSize - Font size in pixels
823
- * @param fontWeight - Font weight (affects width slightly)
824
- * @returns Estimated width in pixels
825
- */
826
- interface TextMeasurementContract {
827
- version: 1;
828
- unit: 'px';
829
- fontCalibration: 'Inter-compatible proportional estimate';
830
- wideCodepoints: 'src/shared/unicode-ranges.ts';
831
- emojiDetection: 'Emoji_Presentation-or-Extended_Pictographic';
832
- ambiguousWidth: 'single-cell';
833
- }
834
- declare const TEXT_MEASUREMENT_CONTRACT: TextMeasurementContract;
835
- interface TextMeasurementInput {
836
- text: string;
837
- fontSize: number;
838
- fontWeight: number;
839
- }
840
- interface TextMeasurementResult {
841
- contract: TextMeasurementContract;
842
- width: number;
843
- charWidthUnits: number;
844
- codePointCount: number;
845
- fontSize: number;
846
- fontWeight: number;
847
- baseRatio: number;
848
- minPadding: number;
849
- }
850
- declare function measureText(input: TextMeasurementInput): TextMeasurementResult;
851
- declare function measureTextWidth(text: string, fontSize: number, fontWeight: number): number;
852
-
853
- /** Semantic channels preserved across the renderer boundary (SPEC §5).
854
- * `tone`/hue are style-derived outputs, not stored here. */
855
- interface SemanticChannels {
856
- /** Hierarchy / callout weight / star magnitude. */
857
- importance?: number;
858
- /** Chart value or quantitative measure (normalized where known). */
859
- value?: number;
860
- /** Chart series, entity type, swimlane, section identity. */
861
- category?: string;
862
- /** e.g. gantt 'done' | 'active' | 'crit'; state 'start' | 'end'. */
863
- status?: string;
864
- /** Task completion in [0,1]. */
865
- progress?: number;
866
- /** Transit route / PCB net identity. */
867
- route?: string;
868
- /** Author-flagged emphasis. */
869
- emphasis?: boolean;
870
- }
871
- /** Mark roles. A closed set per family keeps backends role-aware ("don't
872
- * hachure a lifeline; do hatch a node") without importing family modules. */
873
- type SceneRole = 'node' | 'edge' | 'edge-label' | 'group' | 'group-header' | 'label' | 'actor' | 'lifeline' | 'activation' | 'message' | 'block' | 'note' | 'class-box' | 'member' | 'entity' | 'attribute' | 'relationship' | 'cardinality' | 'pie-slice' | 'legend' | 'bar' | 'series' | 'point' | 'axis' | 'grid' | 'plate' | 'section' | 'task' | 'milestone' | 'marker-line' | 'rail' | 'period' | 'event' | 'score' | 'actor-pill' | 'service' | 'junction' | 'icon' | 'title' | 'defs' | 'prelude' | 'chrome';
874
- /** Geometry a styled backend can redraw. Numbers are in final user units.
875
- * Paint strings may be CSS var()/color-mix() refs — they resolve later via
876
- * inlineResolvedColors, exactly like the crisp path. */
877
- type Geometry = {
878
- kind: 'rect';
879
- x: number;
880
- y: number;
881
- width: number;
882
- height: number;
883
- rx?: number;
884
- ry?: number;
885
- } | {
886
- kind: 'circle';
887
- cx: number;
888
- cy: number;
889
- r: number;
890
- } | {
891
- kind: 'ellipse';
892
- cx: number;
893
- cy: number;
894
- rx: number;
895
- ry: number;
896
- } | {
897
- kind: 'line';
898
- x1: number;
899
- y1: number;
900
- x2: number;
901
- y2: number;
902
- } | {
903
- kind: 'polygon';
904
- points: Array<{
905
- x: number;
906
- y: number;
907
- }>;
908
- } | {
909
- kind: 'polyline';
910
- points: Array<{
911
- x: number;
912
- y: number;
913
- }>;
914
- } | {
915
- kind: 'path';
916
- d: string;
917
- } | {
918
- kind: 'compound';
919
- children: Geometry[];
920
- };
921
- /** The resolved paint attached to a mark — already cascaded (theme tokens,
922
- * classDef, inline style, role defaults) by the family lowering. */
923
- interface MarkPaint {
924
- fill?: string;
925
- stroke?: string;
926
- strokeWidth?: string;
927
- strokeDasharray?: string;
928
- opacity?: string;
929
- }
930
- interface SceneNodeBase {
931
- /** Stable identifier for seeding and cross-references. Derived from source
932
- * semantics (node id, edge endpoints, slice label...), never list position
933
- * (§8 seed contract). */
934
- id: string;
935
- role: SceneRole;
936
- channels?: SemanticChannels;
937
- /** The exact crisp SVG serialization of this mark (possibly multi-line,
938
- * possibly '' for marks that draw nothing, e.g. invisible edges). */
939
- crisp: string;
940
- }
941
- interface ShapeMark extends SceneNodeBase {
942
- kind: 'shape';
943
- geometry: Geometry;
944
- paint: MarkPaint;
945
- }
946
- interface MarkerRef {
947
- /** Def id referenced via url(#...) — 'arrowhead', 'cls-inherit', ... */
948
- id: string;
949
- /** Marker archetype so styled backends can redraw without parsing defs. */
950
- shape: 'arrow' | 'open-arrow' | 'circle' | 'cross' | 'triangle' | 'diamond' | 'diamond-open';
951
- }
952
- interface ConnectorMark extends SceneNodeBase {
953
- kind: 'connector';
954
- geometry: {
955
- kind: 'polyline';
956
- points: Array<{
957
- x: number;
958
- y: number;
959
- }>;
960
- } | {
961
- kind: 'path';
962
- d: string;
963
- points?: Array<{
964
- x: number;
965
- y: number;
966
- }>;
967
- } | {
968
- kind: 'line';
969
- x1: number;
970
- y1: number;
971
- x2: number;
972
- y2: number;
973
- };
974
- lineStyle: 'solid' | 'dotted' | 'dashed' | 'thick' | 'invisible';
975
- paint: MarkPaint;
976
- startMarker?: MarkerRef;
977
- endMarker?: MarkerRef;
978
- }
979
- interface TextMark extends SceneNodeBase {
980
- kind: 'text';
981
- /** Unescaped source text (may contain <br> separators for multiline). */
982
- text: string;
983
- /** Anchor position the crisp emitter used. */
984
- x: number;
985
- y: number;
986
- fontSize: number;
987
- anchor: 'start' | 'middle' | 'end';
988
- paint: MarkPaint;
989
- }
990
- /** A semantic wrapper (<g ...>...</g>) whose children are scene nodes.
991
- * Serialization is reconstructed from open/close/children + per-child indent,
992
- * so styled backends can restyle children while keeping wrapper semantics
993
- * (classes, data-* attributes, ARIA) byte-compatible. */
994
- interface GroupMark extends SceneNodeBase {
995
- kind: 'group';
996
- open: string;
997
- close: string;
998
- children: Array<{
999
- node: SceneNode;
1000
- indent: number;
1001
- }>;
1002
- /** Joiner between open/children/close segments; '\n' everywhere today. */
1003
- join: string;
1004
- }
1005
- /** Escape hatch for chunks not yet lowered semantically (style blocks,
1006
- * defs bodies, icon glyph stacks...). Styled backends pass these through or
1007
- * replace them wholesale via their own prelude/defs policy — they must not
1008
- * parse them. Aim to shrink raw usage over time. */
1009
- interface RawMark extends SceneNodeBase {
1010
- kind: 'raw';
1011
- }
1012
- /** Document prelude parameters — everything svgOpenTag/buildStyleBlock were
1013
- * called with, so a styled backend can re-derive its own document shell
1014
- * (different palette, fonts, backdrop) without string-parsing the crisp one. */
1015
- interface PreludeMark extends SceneNodeBase {
1016
- kind: 'prelude';
1017
- prelude: {
1018
- width: number;
1019
- height: number;
1020
- colors: DiagramColors;
1021
- transparent: boolean;
1022
- font: string;
1023
- hasMonoFont: boolean;
1024
- /** Family-specific extra CSS appended after the shared style block ('' if none). */
1025
- extraCss: string;
1026
- };
1027
- }
1028
- type SceneNode = ShapeMark | ConnectorMark | TextMark | GroupMark | RawMark | PreludeMark;
1029
- /** The lowered document: an ordered flat list of top-level marks. The crisp
1030
- * serialization is parts.map(crisp).join('\n') — exactly what the string
1031
- * renderers produced. */
1032
- interface SceneDoc {
1033
- family: string;
1034
- width: number;
1035
- height: number;
1036
- colors: DiagramColors;
1037
- parts: SceneNode[];
1038
- }
1039
-
1040
- interface StyleBackendContext {
1041
- /** User-supplied deterministic re-roll seed (RenderOptions.seed). */
1042
- seed: number;
1043
- /** The selected style (undefined on the crisp default path). */
1044
- style?: StyleSpec;
1045
- }
1046
- interface StyleBackend {
1047
- id: string;
1048
- /** Serialize one top-level mark (recursing through groups). */
1049
- drawNode(node: SceneNode, ctx: StyleBackendContext): string;
1050
- /** Serialize the whole document. */
1051
- render(doc: SceneDoc, ctx: StyleBackendContext): string;
1052
- }
1053
- declare const DefaultBackend: StyleBackend;
1054
- declare function registerBackend(backend: StyleBackend): void;
1055
- declare function getBackend(id: string): StyleBackend | undefined;
1056
-
1057
- declare function verifyNoExternalRefs(svg: string): {
1058
- ok: boolean;
1059
- refs: string[];
1060
- };
1061
- /**
1062
- * Render Mermaid diagram text to an SVG string — synchronously.
1063
- *
1064
- * Uses elk.bundled.js with a direct FakeWorker bypass (no setTimeout(0) delay).
1065
- * The ELK singleton is created lazily on first use and cached forever.
1066
- *
1067
- * Use this in React components with useMemo() to avoid flash:
1068
- * const svg = useMemo(() => renderMermaidSVG(code, opts), [code])
1069
- *
1070
- * @param text - Mermaid source text
1071
- * @param options - Rendering options (colors, font, spacing)
1072
- * @returns A self-contained SVG string
1073
- *
1074
- * @example
1075
- * ```ts
1076
- * const svg = renderMermaidSVG('graph TD\n A --> B')
1077
- *
1078
- * // With theme
1079
- * const svg = renderMermaidSVG('graph TD\n A --> B', {
1080
- * bg: '#1a1b26', fg: '#a9b1d6'
1081
- * })
1082
- *
1083
- * // With CSS variables (for live theme switching)
1084
- * const svg = renderMermaidSVG('graph TD\n A --> B', {
1085
- * bg: 'var(--background)', fg: 'var(--foreground)', transparent: true
1086
- * })
1087
- * ```
1088
- */
1089
- declare function renderMermaidSVG(text: string, options?: RenderOptions): string;
1090
- /**
1091
- * Render Mermaid diagram text to an SVG string — async.
1092
- *
1093
- * Same result as renderMermaidSVG() but returns a Promise.
1094
- * Useful in async contexts (server handlers, data loaders, etc.)
1095
- */
1096
- declare function renderMermaidSVGAsync(text: string, options?: RenderOptions): Promise<string>;
1097
- /** @deprecated Use `renderMermaidSVG` */
1098
- declare const renderMermaidSync: typeof renderMermaidSVG;
1099
- /** @deprecated Use `renderMermaidSVGAsync` */
1100
- declare const renderMermaid: typeof renderMermaidSVGAsync;
1101
-
1102
- export { type MermaidThemeVariables as $, type AsciiConfig as A, type TextMeasurementInput as B, type ColorMode as C, type Direction as D, type EdgeStyle as E, type FamilyEdgeRouteCertificate as F, type TextMeasurementResult as G, getStyle as H, inferBackend as I, knownStyles as J, measureText as K, type LayoutRouteCertificate as L, type MermaidFrontmatterMap as M, type NodeShape as N, measureTextWidth as O, type PositionedDiagram as P, registerStyle as Q, type RouteClass as R, type SceneDoc as S, TEXT_MEASUREMENT_CONTRACT as T, resolveStyleStack as U, validateStyleSpec as V, verifyNoExternalRefs as W, DEFAULTS as X, DefaultBackend as Y, type JourneyRuntimeConfig as Z, type MermaidRuntimeConfig as _, type MermaidConfigMap as a, type PositionedGraph as a0, type ResolvedColors as a1, type SceneNode as a2, type SceneRole as a3, type SemanticChannels as a4, type StyleBackend as a5, type StyleBackendContext as a6, THEMES as a7, type ThemeName as a8, type TimelineRuntimeConfig as a9, architectureToMermaidGraph as aa, fromShikiTheme as ab, getBackend as ac, inlineResolvedColors as ad, parseArchitectureDiagram as ae, parseMermaid as af, registerBackend as ag, renderMermaid as ah, renderMermaidAscii as ai, renderMermaidSVGAsync as aj, renderMermaidSync as ak, resolveColors as al, resolveDiagramColors as am, type MermaidGraph as b, type EdgeRouteCertificate as c, type RegionContainmentCertificate as d, type MermaidNode as e, type MermaidEdge as f, type NormalizedMermaidSource as g, type RenderOptions as h, type DiagramColors as i, type RenderContext as j, type AsciiTheme as k, type AsciiRenderOptions as l, renderMermaidSVG as m, type StyleInput as n, type AnyPort as o, type DiamondFacet as p, type FamilyRouteCertificate as q, renderMermaidASCII as r, type LayoutRouteClass as s, type PortSemanticRole as t, type PortSide as u, type RouteBlocker as v, type RouteCertificate as w, type RoutePortAssignment as x, type StyleSpec as y, type TextMeasurementContract as z };