@pixerate/editor 0.55.0 → 0.56.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.
- package/dist/agent/index.cjs +18 -17
- package/dist/agent/index.cjs.map +1 -1
- package/dist/agent/index.js +3 -2
- package/dist/agent/index.js.map +1 -1
- package/dist/canvas/index.cjs +2105 -172
- package/dist/canvas/index.cjs.map +1 -1
- package/dist/canvas/index.d.cts +319 -23
- package/dist/canvas/index.d.ts +319 -23
- package/dist/canvas/index.js +2081 -148
- package/dist/canvas/index.js.map +1 -1
- package/dist/chart/index.cjs +32 -30
- package/dist/chart/index.cjs.map +1 -1
- package/dist/chart/index.d.cts +4 -2
- package/dist/chart/index.d.ts +4 -2
- package/dist/chart/index.js +20 -18
- package/dist/chart/index.js.map +1 -1
- package/dist/{chunk-C3JHII3M.cjs → chunk-3I6V7PI4.cjs} +45 -45
- package/dist/{chunk-C3JHII3M.cjs.map → chunk-3I6V7PI4.cjs.map} +1 -1
- package/dist/{chunk-P43HUQRX.cjs → chunk-AHCENCU4.cjs} +12 -10
- package/dist/chunk-AHCENCU4.cjs.map +1 -0
- package/dist/chunk-II77MLHN.cjs +11106 -0
- package/dist/chunk-II77MLHN.cjs.map +1 -0
- package/dist/{chunk-OIKYP7XC.js → chunk-LMUDHBWR.js} +2 -2
- package/dist/{chunk-VODBAO32.js → chunk-OEFCLWZ3.js} +4 -1425
- package/dist/chunk-OEFCLWZ3.js.map +1 -0
- package/dist/{chunk-NK3WL5TJ.cjs → chunk-P2CTDJNF.cjs} +27 -1448
- package/dist/chunk-P2CTDJNF.cjs.map +1 -0
- package/dist/chunk-TKPPIVW7.cjs +1443 -0
- package/dist/chunk-TKPPIVW7.cjs.map +1 -0
- package/dist/chunk-WJSCGBJ2.js +11106 -0
- package/dist/chunk-WJSCGBJ2.js.map +1 -0
- package/dist/{chunk-RIXTW3C4.js → chunk-WLVZ235X.js} +5 -3
- package/dist/{chunk-RIXTW3C4.js.map → chunk-WLVZ235X.js.map} +1 -1
- package/dist/chunk-ZOH6X3VR.js +1443 -0
- package/dist/chunk-ZOH6X3VR.js.map +1 -0
- package/dist/{controller-DscWQbjO.d.ts → controller-D2rj5umx.d.ts} +2 -362
- package/dist/{controller-CX0QfSv0.d.cts → controller-R2biKk_E.d.cts} +2 -362
- package/dist/diagram/index.cjs +1457 -47
- package/dist/diagram/index.cjs.map +1 -1
- package/dist/diagram/index.d.cts +1734 -15
- package/dist/diagram/index.d.ts +1734 -15
- package/dist/diagram/index.js +1436 -26
- package/dist/diagram/index.js.map +1 -1
- package/dist/extensions/index.cjs +5 -4
- package/dist/extensions/index.cjs.map +1 -1
- package/dist/extensions/index.d.cts +4 -3
- package/dist/extensions/index.d.ts +4 -3
- package/dist/extensions/index.js +4 -3
- package/dist/{index-DIWB6xMf.d.cts → index-BcHyG0Wq.d.cts} +2 -1
- package/dist/{index-CALDD35B.d.ts → index-CTCc3m3C.d.ts} +2 -1
- package/dist/index.cjs +10 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +4 -3
- package/dist/index.js.map +1 -1
- package/dist/types-BRp-6zkY.d.cts +362 -0
- package/dist/types-BRp-6zkY.d.ts +362 -0
- package/dist/{types-BULrFyuQ.d.cts → types-DYkjhzdz.d.cts} +1 -1
- package/dist/{types-BULrFyuQ.d.ts → types-DYkjhzdz.d.ts} +1 -1
- package/package.json +1 -1
- package/dist/chunk-H5K77C7Y.cjs +0 -3848
- package/dist/chunk-H5K77C7Y.cjs.map +0 -1
- package/dist/chunk-NK3WL5TJ.cjs.map +0 -1
- package/dist/chunk-P43HUQRX.cjs.map +0 -1
- package/dist/chunk-VODBAO32.js.map +0 -1
- package/dist/chunk-WWJNC7SX.js +0 -3848
- package/dist/chunk-WWJNC7SX.js.map +0 -1
- /package/dist/{chunk-OIKYP7XC.js.map → chunk-LMUDHBWR.js.map} +0 -0
package/dist/diagram/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export {
|
|
1
|
+
import { f as MetaCarrier, M as MermaidDocument, e as EditOp, D as DiagramFamily, g as DiagramAdapter, S as SupportTier, h as Preamble, b as DiagramMeta, E as EdgePattern, A as ArrowHead, d as GraphEdge, i as AdapterParseContext, a as DiagramGraph, j as Diagnostic, G as GraphNode, P as Point, c as GraphGroup } from '../types-DYkjhzdz.cjs';
|
|
2
|
+
export { k as DIRECTIONS, l as Direction } from '../types-DYkjhzdz.cjs';
|
|
3
3
|
import { H as HistoryManager } from '../HistoryManager-DeQQMBCj.cjs';
|
|
4
4
|
import { A as AgentToolProvider } from '../registry-DIpIaCkH.cjs';
|
|
5
5
|
import { g as PresenceStore, e as PresenceClock, d as PresenceActorInfo } from '../presence-Cb6WhcrQ.cjs';
|
|
@@ -33,7 +33,7 @@ declare function applyEdits(doc: MermaidDocument, ops: EditOp[]): MermaidDocumen
|
|
|
33
33
|
/** Registers (or replaces) the adapter for a family. */
|
|
34
34
|
declare function registerDiagramAdapter(adapter: DiagramAdapter<unknown>): void;
|
|
35
35
|
declare function getDiagramAdapter(family: DiagramFamily): DiagramAdapter<unknown>;
|
|
36
|
-
/** `editable` for
|
|
36
|
+
/** `editable` for every family with an adapter; `render-only` for sankey, block, packet, kanban, treemap and the rest. */
|
|
37
37
|
declare function supportTierOf(family: DiagramFamily): SupportTier;
|
|
38
38
|
|
|
39
39
|
interface SplitSource {
|
|
@@ -470,6 +470,1712 @@ declare const ER_PATTERNS: {
|
|
|
470
470
|
title: string;
|
|
471
471
|
}[];
|
|
472
472
|
|
|
473
|
+
/**
|
|
474
|
+
* Shared scaffolding for statement-based adapters whose semantics do not fit
|
|
475
|
+
* the flowchart-like line-grammar engine (sequence, gantt, pie, mindmap,
|
|
476
|
+
* timeline, journey, gitGraph, architecture, quadrant…).
|
|
477
|
+
*
|
|
478
|
+
* A grammar turns body lines into typed statements that always keep their
|
|
479
|
+
* `raw` text. Serialisation emits `raw` for untouched statements and
|
|
480
|
+
* `format(stmt)` for dirty ones, so untouched documents round-trip
|
|
481
|
+
* byte-for-byte. Edits mutate a shallow copy of the statement list, then the
|
|
482
|
+
* document is serialised and re-parsed so `graph` always matches `source`.
|
|
483
|
+
*
|
|
484
|
+
* The base handles metadata ops (`moveNodes`, `resizeNode`, `setViewport`,
|
|
485
|
+
* `setMetaExt`), `replaceSource` and a frontmatter fallback for `setTitle`;
|
|
486
|
+
* everything else is delegated to `grammar.edit`.
|
|
487
|
+
*
|
|
488
|
+
* @module
|
|
489
|
+
*/
|
|
490
|
+
/** Minimum shape of a statement: raw text plus a dirty flag. */
|
|
491
|
+
interface BaseStatement {
|
|
492
|
+
raw: string;
|
|
493
|
+
indent: string;
|
|
494
|
+
/** When true, {@link StatementGrammar.format} regenerates the text. */
|
|
495
|
+
dirty?: boolean;
|
|
496
|
+
}
|
|
497
|
+
interface StatementBody<S extends BaseStatement> {
|
|
498
|
+
statements: S[];
|
|
499
|
+
}
|
|
500
|
+
type StatementDocument<S extends BaseStatement> = MermaidDocument<StatementBody<S>>;
|
|
501
|
+
interface GraphBuildContext {
|
|
502
|
+
header: string;
|
|
503
|
+
/** `title` from the frontmatter, if any. */
|
|
504
|
+
frontmatterTitle?: string;
|
|
505
|
+
meta: AdapterParseContext["meta"];
|
|
506
|
+
}
|
|
507
|
+
interface EditContext<S extends BaseStatement> {
|
|
508
|
+
/** The document the edit is applied to (read-only; `statements` is the working copy). */
|
|
509
|
+
doc: StatementDocument<S>;
|
|
510
|
+
/** Mutable working copy of the statement list. */
|
|
511
|
+
statements: S[];
|
|
512
|
+
/** Mutable copy of the metadata (layout/sizes already cloned). */
|
|
513
|
+
meta: AdapterParseContext["meta"];
|
|
514
|
+
/** Indentation unit detected in the document (or the grammar default). */
|
|
515
|
+
indent: string;
|
|
516
|
+
/** Replaces the header line (families that encode settings in it). */
|
|
517
|
+
setHeader(header: string): void;
|
|
518
|
+
/** Replaces the preamble lines (frontmatter edits). */
|
|
519
|
+
setPreambleLines(lines: string[]): void;
|
|
520
|
+
}
|
|
521
|
+
interface StatementGrammar<S extends BaseStatement> {
|
|
522
|
+
family: DiagramFamily;
|
|
523
|
+
/** Groups physical lines into logical statements (default: one per line). */
|
|
524
|
+
joinLines?(lines: string[]): string[];
|
|
525
|
+
parseLine(line: string, index: number, all: string[]): S;
|
|
526
|
+
/** Regenerates the text of a dirty statement (may return several lines joined by `\n`). */
|
|
527
|
+
format(stmt: S): string;
|
|
528
|
+
buildGraph(statements: S[], ctx: GraphBuildContext): {
|
|
529
|
+
graph: DiagramGraph;
|
|
530
|
+
diagnostics?: Diagnostic[];
|
|
531
|
+
};
|
|
532
|
+
/**
|
|
533
|
+
* Applies a structural edit by mutating `ctx.statements` (and/or header,
|
|
534
|
+
* preamble, meta). Return `false` for ops the family does not support; the
|
|
535
|
+
* document is then returned unchanged.
|
|
536
|
+
*/
|
|
537
|
+
edit(op: EditOp, ctx: EditContext<S>): boolean;
|
|
538
|
+
/**
|
|
539
|
+
* Optional hook for families whose positions are data rather than layout
|
|
540
|
+
* metadata (quadrant points: moving a point rewrites its coordinates). Called
|
|
541
|
+
* before the base's own handling of `moveNodes`, `resizeNode`, `setViewport`
|
|
542
|
+
* and `setMetaExt`; return `true` when the op was handled (the document is
|
|
543
|
+
* then serialised and re-parsed), `false` to fall back to the default.
|
|
544
|
+
*/
|
|
545
|
+
interceptMeta?(op: EditOp, ctx: EditContext<S>): boolean;
|
|
546
|
+
/** Indentation unit used when the document has none. */
|
|
547
|
+
defaultIndent?: string;
|
|
548
|
+
/**
|
|
549
|
+
* Whether `setTitle` is handled by `edit` (a `title` statement) rather than
|
|
550
|
+
* by the frontmatter fallback. Default false.
|
|
551
|
+
*/
|
|
552
|
+
titleAsStatement?: boolean;
|
|
553
|
+
}
|
|
554
|
+
declare function parseStatementDocument<S extends BaseStatement>(grammar: StatementGrammar<S>, source: string, ctx: AdapterParseContext): StatementDocument<S>;
|
|
555
|
+
declare function serializeStatementDocument<S extends BaseStatement>(grammar: StatementGrammar<S>, doc: StatementDocument<S>): string;
|
|
556
|
+
declare function applyStatementEdit<S extends BaseStatement>(grammar: StatementGrammar<S>, doc: StatementDocument<S>, op: EditOp): StatementDocument<S>;
|
|
557
|
+
/** Creates a full adapter from a statement grammar. */
|
|
558
|
+
declare function createStatementAdapter<S extends BaseStatement>(grammar: StatementGrammar<S>): DiagramAdapter<StatementBody<S>>;
|
|
559
|
+
/** Leading whitespace of a line. */
|
|
560
|
+
declare function indentOf(line: string): string;
|
|
561
|
+
/** Lower-case, `_`-joined identifier derived from free text; `fallback` when empty. */
|
|
562
|
+
declare function slugId(text: string, fallback?: string): string;
|
|
563
|
+
/** Returns `base`, or `base_2`, `base_3`… until unused in `taken` (which is updated). */
|
|
564
|
+
declare function uniqueId(base: string, taken: Set<string>): string;
|
|
565
|
+
/** Removes the elements for which `keep` is false, in place. */
|
|
566
|
+
declare function filterInPlace<T>(arr: T[], keep: (item: T, index: number) => boolean): void;
|
|
567
|
+
/** Moves metadata (layout, size) from one id to another, e.g. after a rename. */
|
|
568
|
+
declare function renameMetaKey(meta: AdapterParseContext["meta"], from: string, to: string): void;
|
|
569
|
+
/** Removes metadata for ids that no longer exist. */
|
|
570
|
+
declare function dropMetaKeys(meta: AdapterParseContext["meta"], ids: Iterable<string>): void;
|
|
571
|
+
/** Wraps text in double quotes, escaping inner quotes Mermaid-style. */
|
|
572
|
+
declare function quote(text: string): string;
|
|
573
|
+
/** Strips one layer of matching double quotes. */
|
|
574
|
+
declare function unquote(text: string): string;
|
|
575
|
+
/** Splits on a separator outside quotes/brackets. */
|
|
576
|
+
declare function splitOutsideQuotes(text: string, sep: string): string[];
|
|
577
|
+
|
|
578
|
+
interface ShapeOption {
|
|
579
|
+
value: string;
|
|
580
|
+
label: string;
|
|
581
|
+
category?: string;
|
|
582
|
+
}
|
|
583
|
+
interface EdgeKindOption {
|
|
584
|
+
value: string;
|
|
585
|
+
label: string;
|
|
586
|
+
arrowStart: ArrowHead;
|
|
587
|
+
arrowEnd: ArrowHead;
|
|
588
|
+
pattern: EdgePattern;
|
|
589
|
+
}
|
|
590
|
+
/**
|
|
591
|
+
* A data field the inspector edits generically. `node` fields are written with
|
|
592
|
+
* `setNodeData`, `edge` fields with `setEdgeData`, `diagram` fields with
|
|
593
|
+
* `setGraphData`; the adapter decides how each key is serialised.
|
|
594
|
+
*/
|
|
595
|
+
interface FieldSpec {
|
|
596
|
+
key: string;
|
|
597
|
+
label: string;
|
|
598
|
+
/** `numbers`: a comma-separated list of numbers (chart values). */
|
|
599
|
+
type: "text" | "number" | "numbers" | "lines" | "select" | "boolean" | "tags";
|
|
600
|
+
options?: {
|
|
601
|
+
value: string;
|
|
602
|
+
label: string;
|
|
603
|
+
}[];
|
|
604
|
+
placeholder?: string;
|
|
605
|
+
hint?: string;
|
|
606
|
+
min?: number;
|
|
607
|
+
max?: number;
|
|
608
|
+
step?: number;
|
|
609
|
+
/** Offer the field only on nodes of these shapes (e.g. an image's picture on `image` nodes). */
|
|
610
|
+
shapes?: string[];
|
|
611
|
+
}
|
|
612
|
+
interface FamilyUI {
|
|
613
|
+
family: DiagramFamily;
|
|
614
|
+
title: string;
|
|
615
|
+
shapes: ShapeOption[];
|
|
616
|
+
edgeKinds: EdgeKindOption[];
|
|
617
|
+
patterns: {
|
|
618
|
+
value: EdgePattern;
|
|
619
|
+
label: string;
|
|
620
|
+
}[];
|
|
621
|
+
arrowHeads: {
|
|
622
|
+
value: ArrowHead;
|
|
623
|
+
label: string;
|
|
624
|
+
}[];
|
|
625
|
+
groups: {
|
|
626
|
+
supported: boolean;
|
|
627
|
+
label: string;
|
|
628
|
+
};
|
|
629
|
+
/** Whether nodes carry an explicit label distinct from their id. */
|
|
630
|
+
labels: boolean;
|
|
631
|
+
nodeNoun: string;
|
|
632
|
+
/** Suggests an id for a new node. */
|
|
633
|
+
nextId(graph: DiagramGraph): string;
|
|
634
|
+
/** Whether a node in this family may be moved out of its group. */
|
|
635
|
+
canDetach: boolean;
|
|
636
|
+
/** Node data fields the inspector offers (written with `setNodeData`). */
|
|
637
|
+
nodeFields?: FieldSpec[];
|
|
638
|
+
/** Edge data fields (written with `setEdgeData`). */
|
|
639
|
+
edgeFields?: FieldSpec[];
|
|
640
|
+
/** Diagram-level fields (written with `setGraphData`). */
|
|
641
|
+
diagramFields?: FieldSpec[];
|
|
642
|
+
/** Show classes / inline style / link / classDef controls (default true). */
|
|
643
|
+
styling?: boolean;
|
|
644
|
+
/** Whether dragging a handle to another node creates an edge (default true). */
|
|
645
|
+
connectable?: boolean;
|
|
646
|
+
/** Trees: "Add" attaches the new node under the selected node. */
|
|
647
|
+
hierarchy?: boolean;
|
|
648
|
+
/** Offer the direction selector (default true). */
|
|
649
|
+
directions?: boolean;
|
|
650
|
+
/** Offer a per-group direction in the inspector (default true; git graphs have one direction). */
|
|
651
|
+
groupDirections?: boolean;
|
|
652
|
+
/** Offer "Arrange" (dagre). False when positions derive from the data (default true). */
|
|
653
|
+
arrange?: boolean;
|
|
654
|
+
/**
|
|
655
|
+
* Show Mermaid's own rendering next to the canvas by default. Every built-in
|
|
656
|
+
* family draws its Mermaid picture on the canvas itself, so this is off.
|
|
657
|
+
*/
|
|
658
|
+
preview?: boolean;
|
|
659
|
+
/**
|
|
660
|
+
* Whether the family is drawn on the canvas (default true). Every built-in
|
|
661
|
+
* family is: flowchart, state, class and ER as nodes and edges, the rest as
|
|
662
|
+
* their own picture (`mermaidToScene` in `@pixerate/editor/canvas`). A host
|
|
663
|
+
* family without a drawing can set it false and show Mermaid's rendering.
|
|
664
|
+
*/
|
|
665
|
+
canvas?: boolean;
|
|
666
|
+
/** Offer From / To selects for edges in the inspector (`reconnectEdge`). */
|
|
667
|
+
endpoints?: boolean;
|
|
668
|
+
/** Noun for edges in the UI ("Message", "Dependency"…). Default "Edge". */
|
|
669
|
+
edgeNoun?: string;
|
|
670
|
+
/** Default payload for a node created from the toolbar. */
|
|
671
|
+
newNode?(graph: DiagramGraph, parentId?: string): Partial<GraphNode>;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
declare const pieUI: FamilyUI;
|
|
675
|
+
|
|
676
|
+
/**
|
|
677
|
+
* Mind map vocabulary. Topics form a tree: "Add" attaches the new topic under
|
|
678
|
+
* the selected one (`hierarchy`), and dragging a topic onto another topic
|
|
679
|
+
* moves it (with its subtree) under that topic. The canvas draws Mermaid's own
|
|
680
|
+
* picture (`canvases/mindmap.tsx`) with positions derived from the tree, so
|
|
681
|
+
* there is no "Arrange", direction or connection handle. Branches cannot be
|
|
682
|
+
* deleted on their own; delete the child topic instead.
|
|
683
|
+
*/
|
|
684
|
+
declare const mindmapUI: FamilyUI;
|
|
685
|
+
|
|
686
|
+
/**
|
|
687
|
+
* Quadrant chart vocabulary. The canvas draws Mermaid's chart; points sit
|
|
688
|
+
* where their coordinates put them (dragging one rewrites its `[x, y]`, and
|
|
689
|
+
* its quadrant follows), the four quadrants are fixed (renamable on the
|
|
690
|
+
* canvas, not movable) and there are no edges.
|
|
691
|
+
*/
|
|
692
|
+
declare const quadrantUI: FamilyUI;
|
|
693
|
+
|
|
694
|
+
/** Toolbar / inspector vocabulary for C4 diagrams (all five C4 types). */
|
|
695
|
+
declare const c4UI: FamilyUI;
|
|
696
|
+
|
|
697
|
+
/** Toolbar / inspector vocabulary for `architecture-beta` diagrams. */
|
|
698
|
+
declare const architectureUI: FamilyUI;
|
|
699
|
+
|
|
700
|
+
/** Toolbar / inspector vocabulary for `sequenceDiagram`. */
|
|
701
|
+
declare const sequenceUI: FamilyUI;
|
|
702
|
+
|
|
703
|
+
/**
|
|
704
|
+
* Toolbar / inspector vocabulary for `gitGraph`. Branches are groups: "Group"
|
|
705
|
+
* starts a new branch at the end of the history (selected commits are not
|
|
706
|
+
* moved), and connecting two branch tips appends a `merge`. The canvas draws
|
|
707
|
+
* Mermaid's own picture (`canvases/gitgraph.tsx`): positions follow the commit
|
|
708
|
+
* order, so there is no "Arrange"; the direction is the header's `LR`/`TB`/`BT`.
|
|
709
|
+
*/
|
|
710
|
+
declare const gitGraphUI: FamilyUI;
|
|
711
|
+
|
|
712
|
+
declare const ganttUI: FamilyUI;
|
|
713
|
+
|
|
714
|
+
declare const timelineUI: FamilyUI;
|
|
715
|
+
|
|
716
|
+
declare const journeyUI: FamilyUI;
|
|
717
|
+
|
|
718
|
+
declare const xyChartUI: FamilyUI;
|
|
719
|
+
|
|
720
|
+
declare const radarUI: FamilyUI;
|
|
721
|
+
|
|
722
|
+
/** A field as agents and hosts see it: what can be written and how. */
|
|
723
|
+
interface FieldDescription {
|
|
724
|
+
key: string;
|
|
725
|
+
label: string;
|
|
726
|
+
type: FieldSpec["type"];
|
|
727
|
+
options?: string[];
|
|
728
|
+
min?: number;
|
|
729
|
+
max?: number;
|
|
730
|
+
hint?: string;
|
|
731
|
+
/** Only on nodes of these shapes. */
|
|
732
|
+
shapes?: string[];
|
|
733
|
+
}
|
|
734
|
+
/** {@link FieldSpec}s without the inspector-only details (placeholders, steps, option labels). */
|
|
735
|
+
declare function describeFields(fields: readonly FieldSpec[] | undefined): FieldDescription[];
|
|
736
|
+
/** The values of `data` that `fields` declare (what a reader needs, without parser internals). */
|
|
737
|
+
declare function pickFieldData(fields: readonly FieldSpec[] | undefined, data: Record<string, unknown> | undefined): Record<string, unknown>;
|
|
738
|
+
/**
|
|
739
|
+
* Checks a data patch against a family's fields and returns it as the adapters expect it
|
|
740
|
+
* (`null` or `""` clears a field, so it becomes `undefined`). Throws a sentence naming the
|
|
741
|
+
* problem and the allowed values when a key is unknown, does not apply to `shape`, or a
|
|
742
|
+
* value has the wrong type or is out of range. Nothing is changed when it throws.
|
|
743
|
+
*
|
|
744
|
+
* Value types: `text` and `select` take a string, `number` a number, `boolean` a boolean,
|
|
745
|
+
* `numbers` an array of numbers, `lines` and `tags` an array of strings.
|
|
746
|
+
*/
|
|
747
|
+
declare function checkFieldData(fields: readonly FieldSpec[] | undefined, data: Record<string, unknown>, what: string, shape?: string): Record<string, unknown>;
|
|
748
|
+
|
|
749
|
+
declare const flowchartUI: FamilyUI;
|
|
750
|
+
declare const stateUI: FamilyUI;
|
|
751
|
+
declare const classUI: FamilyUI;
|
|
752
|
+
declare const erUI: FamilyUI;
|
|
753
|
+
declare function familyUI(family: DiagramFamily): FamilyUI | null;
|
|
754
|
+
declare const FAMILY_TITLES: Record<DiagramFamily, string>;
|
|
755
|
+
/** Starter sources for new documents, by family. */
|
|
756
|
+
declare const FAMILY_TEMPLATES: Partial<Record<DiagramFamily, string>>;
|
|
757
|
+
/**
|
|
758
|
+
* The smallest source for each family in {@link FAMILY_TEMPLATES}: an empty
|
|
759
|
+
* canvas Mermaid still accepts (class diagrams need a statement, C4 a title).
|
|
760
|
+
* For "start blank" flows where the user or an agent fills the diagram in.
|
|
761
|
+
*/
|
|
762
|
+
declare const FAMILY_BLANKS: Partial<Record<DiagramFamily, string>>;
|
|
763
|
+
/** One line on what each family in {@link FAMILY_TEMPLATES} is for, for type pickers. */
|
|
764
|
+
declare const FAMILY_DESCRIPTIONS: Partial<Record<DiagramFamily, string>>;
|
|
765
|
+
|
|
766
|
+
/**
|
|
767
|
+
* Family layouts: families whose positions come from their data (quadrant points,
|
|
768
|
+
* sequence participants, pie slices, Gantt bars…) register one here so the canvas
|
|
769
|
+
* shows the diagram's own geometry instead of a generic graph layout. The dagre layout
|
|
770
|
+
* in `@pixerate/editor/canvas` asks this registry first. Kept here, free of dagre, so
|
|
771
|
+
* family adapters can register without pulling in the canvas.
|
|
772
|
+
*
|
|
773
|
+
* @module
|
|
774
|
+
*/
|
|
775
|
+
interface Size {
|
|
776
|
+
width: number;
|
|
777
|
+
height: number;
|
|
778
|
+
}
|
|
779
|
+
/** Absolute top-left positions and sizes for every node and group. */
|
|
780
|
+
interface LayoutResult {
|
|
781
|
+
positions: Record<string, Point>;
|
|
782
|
+
sizes: Record<string, Size>;
|
|
783
|
+
}
|
|
784
|
+
/** Options a family layout receives (the canvas layout options, with a measure resolved). */
|
|
785
|
+
interface FamilyLayoutOptions {
|
|
786
|
+
/** Node size estimator. */
|
|
787
|
+
measure: (node: GraphNode) => Size;
|
|
788
|
+
/** Gap between nodes in a rank, in px. */
|
|
789
|
+
nodeSep?: number;
|
|
790
|
+
/** Gap between ranks, in px. */
|
|
791
|
+
rankSep?: number;
|
|
792
|
+
/** Padding inside groups around their children, in px. */
|
|
793
|
+
groupPadding?: number;
|
|
794
|
+
/** Height reserved for a group's title, in px. */
|
|
795
|
+
groupTitleHeight?: number;
|
|
796
|
+
}
|
|
797
|
+
/**
|
|
798
|
+
* A family-specific layout. Receives the graph, the stored metadata and the resolved
|
|
799
|
+
* options; returns absolute positions and sizes for every node and group.
|
|
800
|
+
*/
|
|
801
|
+
type FamilyLayout = (graph: DiagramGraph, meta: DiagramMeta, options: FamilyLayoutOptions) => LayoutResult;
|
|
802
|
+
/** Registers (or replaces) the layout used for a family. */
|
|
803
|
+
declare function registerFamilyLayout(family: DiagramFamily, layout: FamilyLayout): void;
|
|
804
|
+
declare function getFamilyLayout(family: DiagramFamily | undefined): FamilyLayout | undefined;
|
|
805
|
+
/** The frame XY charts are drawn in (Mermaid's default 700 × 500). */
|
|
806
|
+
declare const XY_CHART_BOX: {
|
|
807
|
+
readonly x: 0;
|
|
808
|
+
readonly y: 0;
|
|
809
|
+
readonly width: 700;
|
|
810
|
+
readonly height: 500;
|
|
811
|
+
};
|
|
812
|
+
/** The frame radar charts are drawn in (Mermaid's default 600 × 600). */
|
|
813
|
+
declare const RADAR_CHART_BOX: {
|
|
814
|
+
readonly x: 0;
|
|
815
|
+
readonly y: 0;
|
|
816
|
+
readonly width: 600;
|
|
817
|
+
readonly height: 600;
|
|
818
|
+
};
|
|
819
|
+
/** A layout that gives every node and group the same frame (charts drawn as one picture). */
|
|
820
|
+
declare function sharedFrameLayout(box: {
|
|
821
|
+
x: number;
|
|
822
|
+
y: number;
|
|
823
|
+
width: number;
|
|
824
|
+
height: number;
|
|
825
|
+
}): FamilyLayout;
|
|
826
|
+
|
|
827
|
+
/**
|
|
828
|
+
* `pie` adapter.
|
|
829
|
+
*
|
|
830
|
+
* ```
|
|
831
|
+
* pie showData
|
|
832
|
+
* title Pets adopted
|
|
833
|
+
* "Dogs" : 386
|
|
834
|
+
* "Cats" : 85
|
|
835
|
+
* ```
|
|
836
|
+
*
|
|
837
|
+
* Canvas model: one node per slice (shape `slice`, `data.value`), no edges,
|
|
838
|
+
* no groups. `graph.data.showData` mirrors the header flag; the title comes
|
|
839
|
+
* from a `title` statement (or the header's `title …` suffix). Slice ids are
|
|
840
|
+
* derived from their labels (`Dogs` → `Dogs`, `Hot dogs` → `Hot_dogs`), made
|
|
841
|
+
* unique with `_2`, `_3`… and kept stable through edits other than renames.
|
|
842
|
+
*
|
|
843
|
+
* Positions are data: the registered layout puts every slice on the pie's
|
|
844
|
+
* bounding square (see `./geometry`), and drop positions are ignored.
|
|
845
|
+
*
|
|
846
|
+
* @module
|
|
847
|
+
*/
|
|
848
|
+
type PieStatement = (BaseStatement & {
|
|
849
|
+
kind: "raw";
|
|
850
|
+
}) | (BaseStatement & {
|
|
851
|
+
kind: "title";
|
|
852
|
+
title: string;
|
|
853
|
+
}) | (BaseStatement & {
|
|
854
|
+
kind: "slice";
|
|
855
|
+
label: string;
|
|
856
|
+
value: number;
|
|
857
|
+
});
|
|
858
|
+
declare const pieGrammar: StatementGrammar<PieStatement>;
|
|
859
|
+
declare const pieAdapter: DiagramAdapter<StatementBody<PieStatement>>;
|
|
860
|
+
|
|
861
|
+
/**
|
|
862
|
+
* `xychart-beta` adapter.
|
|
863
|
+
*
|
|
864
|
+
* ```
|
|
865
|
+
* xychart-beta
|
|
866
|
+
* title "Sales revenue"
|
|
867
|
+
* x-axis [jan, feb, mar]
|
|
868
|
+
* y-axis "Revenue (in $)" 4000 --> 11000
|
|
869
|
+
* bar [5000, 6000, 7500]
|
|
870
|
+
* line "Target" [5500, 6500, 7000]
|
|
871
|
+
* ```
|
|
872
|
+
*
|
|
873
|
+
* Canvas model: one node per series (shape `bar` or `line`, `data.values`
|
|
874
|
+
* in x-axis order), no edges, no groups. Series ids are their kind and
|
|
875
|
+
* ordinal (`bar1`, `bar2`, `line1`), so a rename keeps the id; the label is
|
|
876
|
+
* the series title, or `Bar 1` / `Line 1` when it has none
|
|
877
|
+
* (`data.titled: false`). The axes and orientation are diagram data:
|
|
878
|
+
* `graph.data` holds `categories` (the x-axis bands), `xTitle`, `xMin` /
|
|
879
|
+
* `xMax` (a numeric x-axis), `yTitle`, `yMin` / `yMax` and `horizontal`.
|
|
880
|
+
*
|
|
881
|
+
* Drawn with the chart module (`@pixerate/editor/canvas` family scenes); every series
|
|
882
|
+
* node shares the chart frame.
|
|
883
|
+
*
|
|
884
|
+
* @module
|
|
885
|
+
*/
|
|
886
|
+
type XySeriesKind = "bar" | "line";
|
|
887
|
+
type XyStatement = (BaseStatement & {
|
|
888
|
+
kind: "raw";
|
|
889
|
+
}) | (BaseStatement & {
|
|
890
|
+
kind: "title";
|
|
891
|
+
title: string;
|
|
892
|
+
}) | (BaseStatement & {
|
|
893
|
+
kind: "xaxis";
|
|
894
|
+
title?: string;
|
|
895
|
+
categories?: string[];
|
|
896
|
+
range?: [number, number];
|
|
897
|
+
}) | (BaseStatement & {
|
|
898
|
+
kind: "yaxis";
|
|
899
|
+
title?: string;
|
|
900
|
+
range?: [number, number];
|
|
901
|
+
}) | (BaseStatement & {
|
|
902
|
+
kind: "series";
|
|
903
|
+
series: XySeriesKind;
|
|
904
|
+
title?: string;
|
|
905
|
+
values: number[];
|
|
906
|
+
});
|
|
907
|
+
declare const xyChartGrammar: StatementGrammar<XyStatement>;
|
|
908
|
+
declare const xyChartAdapter: DiagramAdapter<StatementBody<XyStatement>>;
|
|
909
|
+
|
|
910
|
+
/**
|
|
911
|
+
* `radar-beta` adapter.
|
|
912
|
+
*
|
|
913
|
+
* ```
|
|
914
|
+
* radar-beta
|
|
915
|
+
* title Skills
|
|
916
|
+
* axis m["Math"], s["Science"], e["English"]
|
|
917
|
+
* curve alice["Alice"]{85, 90, 80}
|
|
918
|
+
* curve bob["Bob"]{ e: 70, m: 75, s: 85 }
|
|
919
|
+
* max 100
|
|
920
|
+
* ```
|
|
921
|
+
*
|
|
922
|
+
* Canvas model: one node per curve (shape `curve`, `data.values` in axis
|
|
923
|
+
* order; keyed entries are resolved and missing axes read 0), no edges, no
|
|
924
|
+
* groups. Node ids are the curve ids and labels their `["…"]` labels (or the
|
|
925
|
+
* id). The axes and options are diagram data: `graph.data` holds `axes`
|
|
926
|
+
* (labels), `axisIds`, `max`, `min`, `ticks`, `graticule` and `showLegend`.
|
|
927
|
+
* Edited curves are written positionally; editing the axes rewrites them as
|
|
928
|
+
* one `axis` line and every curve to the new axis count.
|
|
929
|
+
*
|
|
930
|
+
* Drawn with the chart module (`@pixerate/editor/canvas` family scenes); every series
|
|
931
|
+
* node shares the chart frame.
|
|
932
|
+
*
|
|
933
|
+
* @module
|
|
934
|
+
*/
|
|
935
|
+
interface AxisEntry {
|
|
936
|
+
id: string;
|
|
937
|
+
label?: string;
|
|
938
|
+
}
|
|
939
|
+
interface CurveEntry {
|
|
940
|
+
axis?: string;
|
|
941
|
+
value: number;
|
|
942
|
+
}
|
|
943
|
+
declare const OPTIONS: readonly ["max", "min", "ticks", "graticule", "showLegend"];
|
|
944
|
+
type OptionName = (typeof OPTIONS)[number];
|
|
945
|
+
type RadarStatement = (BaseStatement & {
|
|
946
|
+
kind: "raw";
|
|
947
|
+
}) | (BaseStatement & {
|
|
948
|
+
kind: "title";
|
|
949
|
+
title: string;
|
|
950
|
+
}) | (BaseStatement & {
|
|
951
|
+
kind: "axis";
|
|
952
|
+
axes: AxisEntry[];
|
|
953
|
+
}) | (BaseStatement & {
|
|
954
|
+
kind: "curve";
|
|
955
|
+
id: string;
|
|
956
|
+
label?: string;
|
|
957
|
+
entries: CurveEntry[];
|
|
958
|
+
}) | (BaseStatement & {
|
|
959
|
+
kind: "option";
|
|
960
|
+
name: OptionName;
|
|
961
|
+
value: string;
|
|
962
|
+
});
|
|
963
|
+
declare const radarGrammar: StatementGrammar<RadarStatement>;
|
|
964
|
+
declare const radarAdapter: DiagramAdapter<StatementBody<RadarStatement>>;
|
|
965
|
+
|
|
966
|
+
/**
|
|
967
|
+
* Geometry of a quadrant chart as Mermaid draws it (`quadrantBuilder.ts`): a
|
|
968
|
+
* 500×500 chart with the title on top, the y-axis labels in a strip on the
|
|
969
|
+
* left, the x-axis labels in a strip under the chart (above it when there
|
|
970
|
+
* are no points), the square chart area split into four quadrants, and every
|
|
971
|
+
* point a circle on its `[x, y]` with its label just below. Shared by the
|
|
972
|
+
* layout, the editor (dragging a point rewrites its coordinates) and the
|
|
973
|
+
* React canvas, so all three agree.
|
|
974
|
+
*
|
|
975
|
+
* All coordinates are canvas pixels in the frame of Mermaid's SVG.
|
|
976
|
+
*
|
|
977
|
+
* @module
|
|
978
|
+
*/
|
|
979
|
+
/** Mermaid's `quadrantChart` defaults. */
|
|
980
|
+
declare const QUADRANT_METRICS: {
|
|
981
|
+
readonly chartWidth: 500;
|
|
982
|
+
readonly chartHeight: 500;
|
|
983
|
+
readonly titleFontSize: 20;
|
|
984
|
+
readonly titlePadding: 10;
|
|
985
|
+
readonly quadrantPadding: 5;
|
|
986
|
+
readonly xAxisLabelPadding: 5;
|
|
987
|
+
readonly yAxisLabelPadding: 5;
|
|
988
|
+
readonly xAxisLabelFontSize: 16;
|
|
989
|
+
readonly yAxisLabelFontSize: 16;
|
|
990
|
+
readonly quadrantLabelFontSize: 16;
|
|
991
|
+
readonly quadrantTextTopPadding: 5;
|
|
992
|
+
readonly pointTextPadding: 5;
|
|
993
|
+
readonly pointLabelFontSize: 12;
|
|
994
|
+
readonly pointRadius: 5;
|
|
995
|
+
readonly internalBorderWidth: 1;
|
|
996
|
+
readonly externalBorderWidth: 2;
|
|
997
|
+
};
|
|
998
|
+
/** Side of the square node box every point gets on the canvas (centred on the point). */
|
|
999
|
+
declare const POINT_BOX = 24;
|
|
1000
|
+
interface QuadrantSpace {
|
|
1001
|
+
/** Left / top of the chart area (the four quadrants). */
|
|
1002
|
+
left: number;
|
|
1003
|
+
top: number;
|
|
1004
|
+
width: number;
|
|
1005
|
+
height: number;
|
|
1006
|
+
/** Mermaid moves the x-axis labels under the chart once there are points. */
|
|
1007
|
+
xAxisPosition: "top" | "bottom";
|
|
1008
|
+
}
|
|
1009
|
+
interface QuadrantSpaceInput {
|
|
1010
|
+
title: boolean;
|
|
1011
|
+
xAxis: boolean;
|
|
1012
|
+
yAxis: boolean;
|
|
1013
|
+
points: boolean;
|
|
1014
|
+
}
|
|
1015
|
+
/** Mermaid's `calculateSpace`. */
|
|
1016
|
+
declare function quadrantSpace({ title, xAxis, yAxis, points }: QuadrantSpaceInput): QuadrantSpace;
|
|
1017
|
+
type GraphLike = Pick<DiagramGraph, "nodes" | "title" | "data">;
|
|
1018
|
+
/** What the space depends on, read from a graph. */
|
|
1019
|
+
declare function spaceInput(graph: GraphLike, pointCount?: number): QuadrantSpaceInput;
|
|
1020
|
+
/** Centre of a point with coordinates `[x, y]` (0–1). */
|
|
1021
|
+
declare function pointCentre(x: number, y: number, space: QuadrantSpace): Point;
|
|
1022
|
+
/** Top-left of a point's node box (see {@link POINT_BOX}). */
|
|
1023
|
+
declare function pointPosition(x: number, y: number, space: QuadrantSpace): Point;
|
|
1024
|
+
/** Coordinates (0–1, two decimals, clamped) of a point whose node box is at `position`. */
|
|
1025
|
+
declare function positionToData(position: Point, space: QuadrantSpace): {
|
|
1026
|
+
x: number;
|
|
1027
|
+
y: number;
|
|
1028
|
+
};
|
|
1029
|
+
interface QuadrantBox {
|
|
1030
|
+
n: 1 | 2 | 3 | 4;
|
|
1031
|
+
/** Group id (`quadrant-1`…). */
|
|
1032
|
+
id: string;
|
|
1033
|
+
x: number;
|
|
1034
|
+
y: number;
|
|
1035
|
+
width: number;
|
|
1036
|
+
height: number;
|
|
1037
|
+
/** Label anchor: centred horizontally; `top` hangs from y, `middle` is centred on it. */
|
|
1038
|
+
labelX: number;
|
|
1039
|
+
labelY: number;
|
|
1040
|
+
labelBaseline: "top" | "middle";
|
|
1041
|
+
}
|
|
1042
|
+
type AxisKey = "xAxisLeft" | "xAxisRight" | "yAxisBottom" | "yAxisTop";
|
|
1043
|
+
interface QuadrantAxisLabel {
|
|
1044
|
+
key: AxisKey;
|
|
1045
|
+
text: string;
|
|
1046
|
+
/** Anchor; the text hangs from it (rotated −90° for the y axis, reading upwards). */
|
|
1047
|
+
x: number;
|
|
1048
|
+
y: number;
|
|
1049
|
+
anchor: "start" | "middle";
|
|
1050
|
+
rotation: 0 | -90;
|
|
1051
|
+
/** Length of the strip the label belongs to (for hit boxes). */
|
|
1052
|
+
span: number;
|
|
1053
|
+
}
|
|
1054
|
+
interface QuadrantPointGeometry {
|
|
1055
|
+
id: string;
|
|
1056
|
+
label: string;
|
|
1057
|
+
cx: number;
|
|
1058
|
+
cy: number;
|
|
1059
|
+
radius: number;
|
|
1060
|
+
color?: string;
|
|
1061
|
+
strokeColor?: string;
|
|
1062
|
+
strokeWidth?: string;
|
|
1063
|
+
}
|
|
1064
|
+
interface QuadrantBorder {
|
|
1065
|
+
x1: number;
|
|
1066
|
+
y1: number;
|
|
1067
|
+
x2: number;
|
|
1068
|
+
y2: number;
|
|
1069
|
+
external: boolean;
|
|
1070
|
+
}
|
|
1071
|
+
interface QuadrantGeometry {
|
|
1072
|
+
space: QuadrantSpace;
|
|
1073
|
+
/** Title anchor (centred, hanging from y), when there is a title. */
|
|
1074
|
+
title?: {
|
|
1075
|
+
text: string;
|
|
1076
|
+
x: number;
|
|
1077
|
+
y: number;
|
|
1078
|
+
};
|
|
1079
|
+
quadrants: QuadrantBox[];
|
|
1080
|
+
axisLabels: QuadrantAxisLabel[];
|
|
1081
|
+
borders: QuadrantBorder[];
|
|
1082
|
+
points: QuadrantPointGeometry[];
|
|
1083
|
+
}
|
|
1084
|
+
/** Computes the chart as Mermaid would draw `graph`. */
|
|
1085
|
+
declare function quadrantGeometry(graph: GraphLike & Partial<Pick<DiagramGraph, "classDefs">>): QuadrantGeometry;
|
|
1086
|
+
|
|
1087
|
+
/**
|
|
1088
|
+
* `quadrantChart` adapter.
|
|
1089
|
+
*
|
|
1090
|
+
* ```
|
|
1091
|
+
* quadrantChart
|
|
1092
|
+
* title Feature prioritisation
|
|
1093
|
+
* x-axis Low effort --> High effort
|
|
1094
|
+
* y-axis Low impact --> High impact
|
|
1095
|
+
* quadrant-1 Plan carefully
|
|
1096
|
+
* Dark mode: [0.3, 0.45] radius: 8, color: #ff9900
|
|
1097
|
+
* ```
|
|
1098
|
+
*
|
|
1099
|
+
* Canvas model: one node per point (shape `point`, `data.x` / `data.y` in
|
|
1100
|
+
* 0–1, optional `radius` / `color`), the four quadrants as locked groups
|
|
1101
|
+
* (`quadrant-1` top-right, `quadrant-2` top-left, `quadrant-3` bottom-left,
|
|
1102
|
+
* `quadrant-4` bottom-right) with each point inside the quadrant it falls in.
|
|
1103
|
+
* Axis labels live in `graph.data` (`xAxisLeft`, `xAxisRight`, `yAxisBottom`,
|
|
1104
|
+
* `yAxisTop`). Point ids are derived from labels like pie slices.
|
|
1105
|
+
*
|
|
1106
|
+
* Positions are data: the registered layout places points from their
|
|
1107
|
+
* coordinates on Mermaid's 500×500 chart (see `./geometry`), and dragging a
|
|
1108
|
+
* point (`moveNodes`) rewrites its `[x, y]` instead of storing layout
|
|
1109
|
+
* metadata. A quadrant without a `quadrant-N` statement is labelled
|
|
1110
|
+
* `Quadrant N` with `data.placeholder` (Mermaid draws no label for it).
|
|
1111
|
+
*
|
|
1112
|
+
* @module
|
|
1113
|
+
*/
|
|
1114
|
+
type PointStatement = BaseStatement & {
|
|
1115
|
+
kind: "point";
|
|
1116
|
+
label: string;
|
|
1117
|
+
quoted?: boolean;
|
|
1118
|
+
className?: string;
|
|
1119
|
+
x: number;
|
|
1120
|
+
y: number;
|
|
1121
|
+
/** Trailing styling, e.g. `radius: 10, color: #ff0000`. */
|
|
1122
|
+
styles: string;
|
|
1123
|
+
};
|
|
1124
|
+
type AxisStatement = BaseStatement & {
|
|
1125
|
+
kind: "axis";
|
|
1126
|
+
axis: "x" | "y";
|
|
1127
|
+
from: string;
|
|
1128
|
+
to?: string;
|
|
1129
|
+
};
|
|
1130
|
+
type QuadrantStatement = BaseStatement & {
|
|
1131
|
+
kind: "quadrant";
|
|
1132
|
+
n: 1 | 2 | 3 | 4;
|
|
1133
|
+
label: string;
|
|
1134
|
+
};
|
|
1135
|
+
type QuadrantChartStatement = (BaseStatement & {
|
|
1136
|
+
kind: "raw";
|
|
1137
|
+
}) | (BaseStatement & {
|
|
1138
|
+
kind: "title";
|
|
1139
|
+
title: string;
|
|
1140
|
+
}) | (BaseStatement & {
|
|
1141
|
+
kind: "classDef";
|
|
1142
|
+
name: string;
|
|
1143
|
+
styles: string;
|
|
1144
|
+
}) | AxisStatement | QuadrantStatement | PointStatement;
|
|
1145
|
+
declare const quadrantGrammar: StatementGrammar<QuadrantChartStatement>;
|
|
1146
|
+
declare const quadrantAdapter: DiagramAdapter<StatementBody<QuadrantChartStatement>>;
|
|
1147
|
+
|
|
1148
|
+
/**
|
|
1149
|
+
* `mindmap` adapter.
|
|
1150
|
+
*
|
|
1151
|
+
* ```
|
|
1152
|
+
* mindmap
|
|
1153
|
+
* root((Generative Diagrams))
|
|
1154
|
+
* Authoring
|
|
1155
|
+
* Canvas editing
|
|
1156
|
+
* Rendering
|
|
1157
|
+
* ::icon(fa fa-image)
|
|
1158
|
+
* ```
|
|
1159
|
+
*
|
|
1160
|
+
* Canvas model: one node per mindmap line, one solid tree edge (`data.tree`)
|
|
1161
|
+
* from each node to each child, no groups. Hierarchy comes from indentation:
|
|
1162
|
+
* a node is the child of the nearest shallower node above. Positions are
|
|
1163
|
+
* derived (see `./geometry`): the root in the centre, branches around it.
|
|
1164
|
+
*
|
|
1165
|
+
* The bracket form is kept in `data.form` (`default`, `square`, `rounded`,
|
|
1166
|
+
* `circle`, `bang`, `cloud`, `hexagon`) and mapped to a diagram shape
|
|
1167
|
+
* (`text` for the default form); a
|
|
1168
|
+
* leading Mermaid id (`root((…))`) is kept (`data.explicitId`), otherwise the
|
|
1169
|
+
* id is derived from the label (`Canvas editing` → `Canvas_editing`).
|
|
1170
|
+
* `::icon(…)` and `:::class` lines decorate the node above them and move or
|
|
1171
|
+
* disappear with it.
|
|
1172
|
+
*
|
|
1173
|
+
* Edits: `addNode` (as last child of `node.parentId`, default the root),
|
|
1174
|
+
* `renameNode`, `setNodeShape`, `removeNodes` (with the whole subtree),
|
|
1175
|
+
* `addEdge` / `reconnectEdge` (re-parent the target, with its subtree, under
|
|
1176
|
+
* the source), `setNodeData` (`icon`). Tree edges cannot be removed on their
|
|
1177
|
+
* own; `setTitle` uses the frontmatter. `moveNodes` never stores positions: a
|
|
1178
|
+
* topic dropped onto another topic is re-parented under it (`interceptMeta`).
|
|
1179
|
+
*
|
|
1180
|
+
* @module
|
|
1181
|
+
*/
|
|
1182
|
+
/** Bracket forms of a mindmap node. `default` is plain text. */
|
|
1183
|
+
type MindmapForm = "default" | "square" | "rounded" | "circle" | "bang" | "cloud" | "hexagon";
|
|
1184
|
+
type NodeStatement = BaseStatement & {
|
|
1185
|
+
kind: "node";
|
|
1186
|
+
/** The Mermaid id written before the brackets, if any. */
|
|
1187
|
+
id?: string;
|
|
1188
|
+
label: string;
|
|
1189
|
+
form: MindmapForm;
|
|
1190
|
+
/** Whether the label was written in double quotes. */
|
|
1191
|
+
quoted?: boolean;
|
|
1192
|
+
};
|
|
1193
|
+
type IconStatement = BaseStatement & {
|
|
1194
|
+
kind: "icon";
|
|
1195
|
+
icon: string;
|
|
1196
|
+
};
|
|
1197
|
+
type ClassStatement = BaseStatement & {
|
|
1198
|
+
kind: "class";
|
|
1199
|
+
classes: string[];
|
|
1200
|
+
};
|
|
1201
|
+
type MindmapStatement = (BaseStatement & {
|
|
1202
|
+
kind: "raw";
|
|
1203
|
+
}) | NodeStatement | IconStatement | ClassStatement;
|
|
1204
|
+
declare const mindmapGrammar: StatementGrammar<MindmapStatement>;
|
|
1205
|
+
declare const mindmapAdapter: DiagramAdapter<StatementBody<MindmapStatement>>;
|
|
1206
|
+
|
|
1207
|
+
/**
|
|
1208
|
+
* Geometry of a sequence diagram as Mermaid draws it: participants in a row
|
|
1209
|
+
* of equal-height boxes, a lifeline under each, and one row per message,
|
|
1210
|
+
* note or fragment boundary, top to bottom in document order. Shared by the
|
|
1211
|
+
* layout (participant boxes), the editor (dragging a participant reorders the
|
|
1212
|
+
* columns) and the React canvas (lifelines, message rows, notes, fragments
|
|
1213
|
+
* and activation bars), so all three agree.
|
|
1214
|
+
*
|
|
1215
|
+
* @module
|
|
1216
|
+
*/
|
|
1217
|
+
/** Ordered things that take vertical space, exposed as `graph.data.events`. */
|
|
1218
|
+
type SequenceEvent = {
|
|
1219
|
+
kind: "message";
|
|
1220
|
+
edgeId: string;
|
|
1221
|
+
from: string;
|
|
1222
|
+
to: string;
|
|
1223
|
+
mod: "" | "+" | "-";
|
|
1224
|
+
} | {
|
|
1225
|
+
kind: "note";
|
|
1226
|
+
placement: "over" | "left" | "right";
|
|
1227
|
+
targets: string[];
|
|
1228
|
+
text: string;
|
|
1229
|
+
} | {
|
|
1230
|
+
kind: "open";
|
|
1231
|
+
keyword: string;
|
|
1232
|
+
text: string;
|
|
1233
|
+
} | {
|
|
1234
|
+
kind: "else";
|
|
1235
|
+
keyword: string;
|
|
1236
|
+
text: string;
|
|
1237
|
+
} | {
|
|
1238
|
+
kind: "end";
|
|
1239
|
+
} | {
|
|
1240
|
+
kind: "activate" | "deactivate";
|
|
1241
|
+
target: string;
|
|
1242
|
+
};
|
|
1243
|
+
/** Mermaid's sequence defaults (actor width 150, height 65, margin 50…), in canvas pixels. */
|
|
1244
|
+
declare const SEQUENCE_METRICS: {
|
|
1245
|
+
readonly actorWidth: 150;
|
|
1246
|
+
readonly actorHeight: 65;
|
|
1247
|
+
readonly actorGap: 50;
|
|
1248
|
+
readonly boxPad: 12;
|
|
1249
|
+
readonly boxTitle: 26;
|
|
1250
|
+
readonly firstRow: 34;
|
|
1251
|
+
readonly messageRow: 46;
|
|
1252
|
+
readonly selfMessageRow: 64;
|
|
1253
|
+
readonly noteRow: 48;
|
|
1254
|
+
readonly openRow: 36;
|
|
1255
|
+
readonly elseRow: 32;
|
|
1256
|
+
readonly endRow: 18;
|
|
1257
|
+
readonly bottomGap: 24;
|
|
1258
|
+
readonly activationWidth: 10;
|
|
1259
|
+
};
|
|
1260
|
+
interface SequenceColumn {
|
|
1261
|
+
id: string;
|
|
1262
|
+
x: number;
|
|
1263
|
+
width: number;
|
|
1264
|
+
center: number;
|
|
1265
|
+
}
|
|
1266
|
+
interface SequenceMessageRow {
|
|
1267
|
+
edgeId: string;
|
|
1268
|
+
/** y of the arrow line. */
|
|
1269
|
+
y: number;
|
|
1270
|
+
self: boolean;
|
|
1271
|
+
}
|
|
1272
|
+
interface SequenceNoteBox {
|
|
1273
|
+
text: string;
|
|
1274
|
+
x: number;
|
|
1275
|
+
y: number;
|
|
1276
|
+
width: number;
|
|
1277
|
+
height: number;
|
|
1278
|
+
}
|
|
1279
|
+
interface SequenceFragment {
|
|
1280
|
+
keyword: string;
|
|
1281
|
+
text: string;
|
|
1282
|
+
x: number;
|
|
1283
|
+
y: number;
|
|
1284
|
+
width: number;
|
|
1285
|
+
height: number;
|
|
1286
|
+
/** `else` / `and` / `option` dividers. */
|
|
1287
|
+
dividers: {
|
|
1288
|
+
y: number;
|
|
1289
|
+
text: string;
|
|
1290
|
+
}[];
|
|
1291
|
+
depth: number;
|
|
1292
|
+
}
|
|
1293
|
+
interface SequenceActivation {
|
|
1294
|
+
participant: string;
|
|
1295
|
+
x: number;
|
|
1296
|
+
top: number;
|
|
1297
|
+
bottom: number;
|
|
1298
|
+
}
|
|
1299
|
+
interface SequenceGeometry {
|
|
1300
|
+
columns: Map<string, SequenceColumn>;
|
|
1301
|
+
order: string[];
|
|
1302
|
+
messages: SequenceMessageRow[];
|
|
1303
|
+
notes: SequenceNoteBox[];
|
|
1304
|
+
fragments: SequenceFragment[];
|
|
1305
|
+
activations: SequenceActivation[];
|
|
1306
|
+
/** Box (group) frames, spanning the full height. */
|
|
1307
|
+
boxes: Map<string, {
|
|
1308
|
+
x: number;
|
|
1309
|
+
y: number;
|
|
1310
|
+
width: number;
|
|
1311
|
+
height: number;
|
|
1312
|
+
}>;
|
|
1313
|
+
lifelineTop: number;
|
|
1314
|
+
lifelineBottom: number;
|
|
1315
|
+
/** Total width and height (bottom of the mirrored participants). */
|
|
1316
|
+
width: number;
|
|
1317
|
+
height: number;
|
|
1318
|
+
}
|
|
1319
|
+
declare function sequenceGeometry(graph: DiagramGraph): SequenceGeometry;
|
|
1320
|
+
|
|
1321
|
+
/**
|
|
1322
|
+
* `sequenceDiagram` adapter.
|
|
1323
|
+
*
|
|
1324
|
+
* ```
|
|
1325
|
+
* sequenceDiagram
|
|
1326
|
+
* autonumber
|
|
1327
|
+
* actor U as Customer
|
|
1328
|
+
* participant W as Web app
|
|
1329
|
+
* U->>W: Place order
|
|
1330
|
+
* alt Approved
|
|
1331
|
+
* W-->>U: Order confirmed
|
|
1332
|
+
* end
|
|
1333
|
+
* ```
|
|
1334
|
+
*
|
|
1335
|
+
* Canvas model: one node per participant (shape `rect`, or `actor` for
|
|
1336
|
+
* `actor` declarations), declared ones first in declaration order, then the
|
|
1337
|
+
* ones only mentioned in messages. One edge per message line in document
|
|
1338
|
+
* order; `data.index` is the message's position, `data.kind` the arrow token,
|
|
1339
|
+
* `data.activate` / `data.deactivate` the `+` / `-` suffixes. `box … end`
|
|
1340
|
+
* blocks are groups (`data.color` keeps the box colour). Fragments (`alt`,
|
|
1341
|
+
* `loop`, `par`…), notes, activations and every other line are kept verbatim;
|
|
1342
|
+
* messages inside fragments are still edges. `graph.data.autonumber` mirrors
|
|
1343
|
+
* the `autonumber` statement.
|
|
1344
|
+
*
|
|
1345
|
+
* Message edge ids are `L_<from>_<to>_<n>` where `n` counts messages of the
|
|
1346
|
+
* same pair in document order, so unrelated edits keep them stable.
|
|
1347
|
+
*
|
|
1348
|
+
* @module
|
|
1349
|
+
*/
|
|
1350
|
+
type ParticipantKeyword = "participant" | "actor";
|
|
1351
|
+
type Modifier = "" | "+" | "-";
|
|
1352
|
+
type SequenceStatement = (BaseStatement & {
|
|
1353
|
+
kind: "raw";
|
|
1354
|
+
}) | (BaseStatement & {
|
|
1355
|
+
kind: "title";
|
|
1356
|
+
title: string;
|
|
1357
|
+
colon: boolean;
|
|
1358
|
+
}) | (BaseStatement & {
|
|
1359
|
+
kind: "autonumber";
|
|
1360
|
+
off: boolean;
|
|
1361
|
+
}) | (BaseStatement & {
|
|
1362
|
+
kind: "participant";
|
|
1363
|
+
keyword: ParticipantKeyword;
|
|
1364
|
+
id: string;
|
|
1365
|
+
alias?: string;
|
|
1366
|
+
/** `@{ … }` participant configuration, kept verbatim. */
|
|
1367
|
+
config?: string;
|
|
1368
|
+
create: boolean;
|
|
1369
|
+
}) | (BaseStatement & {
|
|
1370
|
+
kind: "message";
|
|
1371
|
+
from: string;
|
|
1372
|
+
to: string;
|
|
1373
|
+
arrow: string;
|
|
1374
|
+
mod: Modifier;
|
|
1375
|
+
text: string;
|
|
1376
|
+
}) | (BaseStatement & {
|
|
1377
|
+
kind: "box";
|
|
1378
|
+
color?: string;
|
|
1379
|
+
label: string;
|
|
1380
|
+
})
|
|
1381
|
+
/** Fragment openers (`alt`, `loop`…) and continuations (`else`, `and`, `option`). */
|
|
1382
|
+
| (BaseStatement & {
|
|
1383
|
+
kind: "block";
|
|
1384
|
+
keyword: string;
|
|
1385
|
+
text: string;
|
|
1386
|
+
opens: boolean;
|
|
1387
|
+
}) | (BaseStatement & {
|
|
1388
|
+
kind: "end";
|
|
1389
|
+
})
|
|
1390
|
+
/** Lines that reference participants (`Note`, `activate`, `destroy`, `link`…). */
|
|
1391
|
+
| (BaseStatement & {
|
|
1392
|
+
kind: "ref";
|
|
1393
|
+
keyword: string;
|
|
1394
|
+
targets: string[];
|
|
1395
|
+
});
|
|
1396
|
+
declare const sequenceGrammar: StatementGrammar<SequenceStatement>;
|
|
1397
|
+
declare const sequenceAdapter: DiagramAdapter<StatementBody<SequenceStatement>>;
|
|
1398
|
+
|
|
1399
|
+
/**
|
|
1400
|
+
* Shared machinery for "sections of items" families (gantt, timeline,
|
|
1401
|
+
* journey). Their documents share one shape:
|
|
1402
|
+
*
|
|
1403
|
+
* ```
|
|
1404
|
+
* <header>
|
|
1405
|
+
* title Some title
|
|
1406
|
+
* item before any section
|
|
1407
|
+
* section First
|
|
1408
|
+
* item
|
|
1409
|
+
* item
|
|
1410
|
+
* section Second
|
|
1411
|
+
* item
|
|
1412
|
+
* ```
|
|
1413
|
+
*
|
|
1414
|
+
* - `section X` starts a group; every following item belongs to it until the
|
|
1415
|
+
* next `section` line. Items before the first section have no group.
|
|
1416
|
+
* - Groups get ids `uniqueId(slugId(label))`; items get ids from the family
|
|
1417
|
+
* (explicit ids first, then slugs of their text). Explicit ids are reserved
|
|
1418
|
+
* first, then item slugs, then section slugs, so that structural edits on
|
|
1419
|
+
* sections (ungroup, rename) never change item ids.
|
|
1420
|
+
* - {@link editSections} implements the shared edits (title, add/remove/rename
|
|
1421
|
+
* items, grouping, re-parenting) and re-keys layout metadata by statement
|
|
1422
|
+
* identity after every edit, so any id change (rename, explicit id edit)
|
|
1423
|
+
* carries the stored position along.
|
|
1424
|
+
*
|
|
1425
|
+
* Families plug in with a {@link SectionsSpec}: how to recognise and create
|
|
1426
|
+
* items, how to rename them, and which characters their grammar forbids.
|
|
1427
|
+
*
|
|
1428
|
+
* @module
|
|
1429
|
+
*/
|
|
1430
|
+
/** `title …` statement. */
|
|
1431
|
+
interface TitleStatement extends BaseStatement {
|
|
1432
|
+
kind: "title";
|
|
1433
|
+
title: string;
|
|
1434
|
+
}
|
|
1435
|
+
/** `section …` statement (starts a group). */
|
|
1436
|
+
interface SectionStatement extends BaseStatement {
|
|
1437
|
+
kind: "section";
|
|
1438
|
+
label: string;
|
|
1439
|
+
}
|
|
1440
|
+
/** A statement the diagram module does not model; always emitted verbatim. */
|
|
1441
|
+
interface RawStatement extends BaseStatement {
|
|
1442
|
+
kind: "raw";
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1445
|
+
declare const GANTT_METRICS: {
|
|
1446
|
+
/** Mermaid's barHeight 20 / barGap 4, scaled up a little for editing. */
|
|
1447
|
+
readonly barHeight: 24;
|
|
1448
|
+
readonly barGap: 6;
|
|
1449
|
+
/** Width of the section-name column left of the chart. */
|
|
1450
|
+
readonly labelWidth: 150;
|
|
1451
|
+
readonly rightPadding: 40;
|
|
1452
|
+
/** Space for the date ticks under the chart. */
|
|
1453
|
+
readonly axisHeight: 32;
|
|
1454
|
+
readonly milestoneSize: 22;
|
|
1455
|
+
readonly minChartWidth: 960;
|
|
1456
|
+
readonly maxPxPerDay: 48;
|
|
1457
|
+
readonly minPxPerDay: 4;
|
|
1458
|
+
};
|
|
1459
|
+
interface GanttRow {
|
|
1460
|
+
id: string;
|
|
1461
|
+
/** Section id, if the task belongs to one. */
|
|
1462
|
+
section?: string;
|
|
1463
|
+
sectionIndex: number;
|
|
1464
|
+
row: number;
|
|
1465
|
+
/** Bar box (absolute). */
|
|
1466
|
+
x: number;
|
|
1467
|
+
y: number;
|
|
1468
|
+
width: number;
|
|
1469
|
+
height: number;
|
|
1470
|
+
milestone: boolean;
|
|
1471
|
+
start?: number;
|
|
1472
|
+
end?: number;
|
|
1473
|
+
}
|
|
1474
|
+
interface GanttBand {
|
|
1475
|
+
id?: string;
|
|
1476
|
+
label?: string;
|
|
1477
|
+
index: number;
|
|
1478
|
+
y: number;
|
|
1479
|
+
height: number;
|
|
1480
|
+
}
|
|
1481
|
+
interface GanttTick {
|
|
1482
|
+
x: number;
|
|
1483
|
+
time: number;
|
|
1484
|
+
label: string;
|
|
1485
|
+
}
|
|
1486
|
+
interface GanttGeometry {
|
|
1487
|
+
origin: number;
|
|
1488
|
+
pxPerDay: number;
|
|
1489
|
+
rows: GanttRow[];
|
|
1490
|
+
rowById: Map<string, GanttRow>;
|
|
1491
|
+
bands: GanttBand[];
|
|
1492
|
+
/** Chart area (right of the section labels). */
|
|
1493
|
+
chartX: number;
|
|
1494
|
+
chartWidth: number;
|
|
1495
|
+
top: number;
|
|
1496
|
+
bottom: number;
|
|
1497
|
+
ticks: GanttTick[];
|
|
1498
|
+
today?: number;
|
|
1499
|
+
}
|
|
1500
|
+
declare function ganttGeometry(graph: DiagramGraph, now?: number): GanttGeometry;
|
|
1501
|
+
/** Formats UTC time with the d3 specifiers Mermaid's `axisFormat` uses (`%Y-%m-%d`, `%b %d`…). */
|
|
1502
|
+
declare function formatAxis(t: number, format?: string): string;
|
|
1503
|
+
|
|
1504
|
+
/**
|
|
1505
|
+
* `gantt` adapter.
|
|
1506
|
+
*
|
|
1507
|
+
* ```
|
|
1508
|
+
* gantt
|
|
1509
|
+
* title Q4 delivery roadmap
|
|
1510
|
+
* dateFormat YYYY-MM-DD
|
|
1511
|
+
* section Platform
|
|
1512
|
+
* Design system v9 rollout :done, ds, 2026-10-01, 14d
|
|
1513
|
+
* Observability upgrade :ob, after ds, 14d
|
|
1514
|
+
* ```
|
|
1515
|
+
*
|
|
1516
|
+
* Canvas model: one node per task (shape `task`, or `milestone` when tagged
|
|
1517
|
+
* so), sections as groups, and one dependency edge `X → task` per id in a
|
|
1518
|
+
* task's `after X Y` start (`data.dependency: true`). Task ids are the
|
|
1519
|
+
* explicit Mermaid ids, or slugs of the task names for tasks without one.
|
|
1520
|
+
* Task data: `tags`, `start`, `end` (as written), `explicitId`, plus the
|
|
1521
|
+
* resolved `startTime` / `endTime` (UTC epoch ms, when computable) that the
|
|
1522
|
+
* time-axis layout uses. Config lines (`dateFormat`, `axisFormat`,
|
|
1523
|
+
* `excludes`, `tickInterval`, `todayMarker`) are exposed as `graph.data`.
|
|
1524
|
+
*
|
|
1525
|
+
* @module
|
|
1526
|
+
*/
|
|
1527
|
+
/** Task tags Mermaid recognises before the id/start/end parts. */
|
|
1528
|
+
declare const GANTT_TAGS: readonly ["done", "active", "crit", "milestone", "vert"];
|
|
1529
|
+
/** Diagram-level settings edited with `setGraphData`. */
|
|
1530
|
+
declare const GANTT_CONFIG_KEYS: readonly ["dateFormat", "axisFormat", "excludes", "tickInterval", "todayMarker"];
|
|
1531
|
+
type ConfigKey = (typeof GANTT_CONFIG_KEYS)[number];
|
|
1532
|
+
/** A task line: `Name :tags, id, start, end`. */
|
|
1533
|
+
interface GanttTask extends BaseStatement {
|
|
1534
|
+
kind: "task";
|
|
1535
|
+
name: string;
|
|
1536
|
+
tags: string[];
|
|
1537
|
+
id?: string;
|
|
1538
|
+
start?: string;
|
|
1539
|
+
end: string;
|
|
1540
|
+
/** Text after the task data that Mermaid ignores (`; …`, `# …`), kept on format. */
|
|
1541
|
+
suffix: string;
|
|
1542
|
+
}
|
|
1543
|
+
/** One of the {@link GANTT_CONFIG_KEYS} lines. */
|
|
1544
|
+
interface GanttConfig extends BaseStatement {
|
|
1545
|
+
kind: "config";
|
|
1546
|
+
key: ConfigKey;
|
|
1547
|
+
value: string;
|
|
1548
|
+
}
|
|
1549
|
+
type GanttStatement = RawStatement | TitleStatement | SectionStatement | GanttConfig | GanttTask;
|
|
1550
|
+
/** `after a b` → `["a", "b"]`; `[]` for any other start. */
|
|
1551
|
+
declare function afterIds(start: string | undefined): string[];
|
|
1552
|
+
/**
|
|
1553
|
+
* Parses a date written in a dayjs-style `dateFormat` (`YYYY`, `MM`, `DD`,
|
|
1554
|
+
* `HH`, `mm`, `ss`… plus `x` / `X` timestamps). Falls back to ISO / `Date`
|
|
1555
|
+
* parsing like Mermaid does. Returns UTC epoch milliseconds.
|
|
1556
|
+
*/
|
|
1557
|
+
declare function parseGanttDate(text: string, format?: string): number | undefined;
|
|
1558
|
+
/** Formats UTC epoch ms with a `dateFormat`; unsupported formats fall back to `YYYY-MM-DD`. */
|
|
1559
|
+
declare function formatGanttDate(ms: number, format?: string): string;
|
|
1560
|
+
declare const ganttGrammar: StatementGrammar<GanttStatement>;
|
|
1561
|
+
declare const ganttAdapter: DiagramAdapter<StatementBody<GanttStatement>>;
|
|
1562
|
+
|
|
1563
|
+
/**
|
|
1564
|
+
* `timeline` adapter.
|
|
1565
|
+
*
|
|
1566
|
+
* ```
|
|
1567
|
+
* timeline
|
|
1568
|
+
* title Platform milestones
|
|
1569
|
+
* 2024 : Unified portal launched
|
|
1570
|
+
* : Design system v1
|
|
1571
|
+
* section Later
|
|
1572
|
+
* 2025 : AI chat assistant : Generative forms
|
|
1573
|
+
* ```
|
|
1574
|
+
*
|
|
1575
|
+
* Canvas model: one node per period (shape `rounded`, `data.events`),
|
|
1576
|
+
* sections as groups and synthetic "next" edges between consecutive periods
|
|
1577
|
+
* (not editable; the canvas does not draw them, as Mermaid has no such
|
|
1578
|
+
* arrows). Positions derive from the order of the periods (see
|
|
1579
|
+
* `./geometry`): moving a period (`moveNodes`) reorders it, possibly into
|
|
1580
|
+
* another section, instead of storing a position. A period line and the continuation lines that follow it
|
|
1581
|
+
* directly (` : more`) form ONE statement whose `raw` keeps the original
|
|
1582
|
+
* line breaks; when edited it is re-emitted with the colons aligned under the
|
|
1583
|
+
* period's colon. Period ids are slugs of the period text (`2024` → `2024`).
|
|
1584
|
+
*
|
|
1585
|
+
* @module
|
|
1586
|
+
*/
|
|
1587
|
+
/** A period with its events (possibly spanning several physical lines). */
|
|
1588
|
+
interface TimelinePeriod extends BaseStatement {
|
|
1589
|
+
kind: "period";
|
|
1590
|
+
period: string;
|
|
1591
|
+
events: string[];
|
|
1592
|
+
}
|
|
1593
|
+
type TimelineStatement = RawStatement | TitleStatement | SectionStatement | TimelinePeriod;
|
|
1594
|
+
declare const timelineGrammar: StatementGrammar<TimelineStatement>;
|
|
1595
|
+
declare const timelineAdapter: DiagramAdapter<StatementBody<TimelineStatement>>;
|
|
1596
|
+
/**
|
|
1597
|
+
* Mermaid's geometry: periods in one row (in document order) under their
|
|
1598
|
+
* section headers; stored positions are ignored.
|
|
1599
|
+
*/
|
|
1600
|
+
declare const timelineLayout: FamilyLayout;
|
|
1601
|
+
|
|
1602
|
+
/**
|
|
1603
|
+
* `journey` (user journey) adapter.
|
|
1604
|
+
*
|
|
1605
|
+
* ```
|
|
1606
|
+
* journey
|
|
1607
|
+
* title Requesting a new laptop
|
|
1608
|
+
* section Discover
|
|
1609
|
+
* Find IT portal: 3: Employee
|
|
1610
|
+
* Read policy: 2: Employee, IT
|
|
1611
|
+
* ```
|
|
1612
|
+
*
|
|
1613
|
+
* Canvas model: one node per task (shape `rect`, `data.score` 1–5,
|
|
1614
|
+
* `data.actors`), sections as groups and synthetic "next" edges between
|
|
1615
|
+
* consecutive tasks (not editable; the canvas does not draw them, as Mermaid
|
|
1616
|
+
* has no such arrows). Positions derive from the order of the tasks (see
|
|
1617
|
+
* `./geometry`): moving a task (`moveNodes`) reorders it, possibly into
|
|
1618
|
+
* another section, instead of storing a position. Task ids are slugs of the task names
|
|
1619
|
+
* (`Find IT portal` → `Find_IT_portal`), made unique with `_2`, `_3`….
|
|
1620
|
+
*
|
|
1621
|
+
* @module
|
|
1622
|
+
*/
|
|
1623
|
+
/** A task line: `Name: score: actor1, actor2`. */
|
|
1624
|
+
interface JourneyTask extends BaseStatement {
|
|
1625
|
+
kind: "task";
|
|
1626
|
+
name: string;
|
|
1627
|
+
score: number;
|
|
1628
|
+
actors: string[];
|
|
1629
|
+
}
|
|
1630
|
+
type JourneyStatement = RawStatement | TitleStatement | SectionStatement | JourneyTask;
|
|
1631
|
+
declare const journeyGrammar: StatementGrammar<JourneyStatement>;
|
|
1632
|
+
declare const journeyAdapter: DiagramAdapter<StatementBody<JourneyStatement>>;
|
|
1633
|
+
/**
|
|
1634
|
+
* Mermaid's geometry: tasks in one row (in document order) under their
|
|
1635
|
+
* section bars; stored positions are ignored.
|
|
1636
|
+
*/
|
|
1637
|
+
declare const journeyLayout: FamilyLayout;
|
|
1638
|
+
|
|
1639
|
+
/**
|
|
1640
|
+
* `gitGraph` adapter.
|
|
1641
|
+
*
|
|
1642
|
+
* ```
|
|
1643
|
+
* gitGraph LR:
|
|
1644
|
+
* commit id: "init"
|
|
1645
|
+
* branch develop
|
|
1646
|
+
* checkout develop
|
|
1647
|
+
* commit id: "feat" tag: "v0.1"
|
|
1648
|
+
* checkout main
|
|
1649
|
+
* merge develop
|
|
1650
|
+
* ```
|
|
1651
|
+
*
|
|
1652
|
+
* Canvas model: the statements are simulated in order like Mermaid does
|
|
1653
|
+
* (`branch` also checks the new branch out, the starting branch is `main`).
|
|
1654
|
+
* Every `commit`, `merge` and `cherry-pick` is a node (shape `commit`, or
|
|
1655
|
+
* `merge-commit` for merges); edges are parent links (parent → child, two
|
|
1656
|
+
* parents for merges, and a dotted second link from the picked commit for
|
|
1657
|
+
* cherry-picks, as Mermaid records it); every branch is a group whose members are its commits.
|
|
1658
|
+
* Node ids are the explicit `id:` values, or `c<n>` (the commit's 1-based
|
|
1659
|
+
* ordinal in the document) for commits without one — Mermaid generates random
|
|
1660
|
+
* ids for those, so they are only stable until an earlier commit is inserted.
|
|
1661
|
+
*
|
|
1662
|
+
* Edits never produce text Mermaid rejects: after removals, merges and
|
|
1663
|
+
* cherry-picks that became invalid (same head, missing source…) are dropped,
|
|
1664
|
+
* and `addEdge` only appends a `merge` when it is valid at the end of the
|
|
1665
|
+
* document.
|
|
1666
|
+
*
|
|
1667
|
+
* @module
|
|
1668
|
+
*/
|
|
1669
|
+
interface Attr {
|
|
1670
|
+
key: string;
|
|
1671
|
+
value: string;
|
|
1672
|
+
quoted: boolean;
|
|
1673
|
+
}
|
|
1674
|
+
type GitStatement = (BaseStatement & {
|
|
1675
|
+
kind: "raw";
|
|
1676
|
+
}) | (BaseStatement & {
|
|
1677
|
+
kind: "commit";
|
|
1678
|
+
attrs: Attr[];
|
|
1679
|
+
/** Attributes the diagram module could not read; the line is never regenerated. */
|
|
1680
|
+
opaque: boolean;
|
|
1681
|
+
}) | (BaseStatement & {
|
|
1682
|
+
kind: "merge";
|
|
1683
|
+
branch: string;
|
|
1684
|
+
attrs: Attr[];
|
|
1685
|
+
opaque: boolean;
|
|
1686
|
+
}) | (BaseStatement & {
|
|
1687
|
+
kind: "cherryPick";
|
|
1688
|
+
attrs: Attr[];
|
|
1689
|
+
opaque: boolean;
|
|
1690
|
+
}) | (BaseStatement & {
|
|
1691
|
+
kind: "branch";
|
|
1692
|
+
name: string;
|
|
1693
|
+
order?: string;
|
|
1694
|
+
}) | (BaseStatement & {
|
|
1695
|
+
kind: "checkout";
|
|
1696
|
+
keyword: "checkout" | "switch";
|
|
1697
|
+
name: string;
|
|
1698
|
+
});
|
|
1699
|
+
declare const gitGraphGrammar: StatementGrammar<GitStatement>;
|
|
1700
|
+
declare const gitGraphAdapter: DiagramAdapter<StatementBody<GitStatement>>;
|
|
1701
|
+
|
|
1702
|
+
/**
|
|
1703
|
+
* C4 geometry as Mermaid draws it, shared by the layout (positions), the
|
|
1704
|
+
* canvas (shapes and text placement) and the relation renderer.
|
|
1705
|
+
*
|
|
1706
|
+
* Mermaid lays C4 elements out in rows inside each boundary (four per row by
|
|
1707
|
+
* default, `UpdateLayoutConfig` changes it), nested boundaries below their
|
|
1708
|
+
* parent's elements (two per row), with 50px margins; every element is 216px
|
|
1709
|
+
* wide and as tall as its text. The shapes are Mermaid's unified ones:
|
|
1710
|
+
* `person` (a head over a rounded body), rounded rectangles for systems,
|
|
1711
|
+
* containers and components, `cylinder` for `*Db` and a horizontal
|
|
1712
|
+
* cylinder for `*Queue`. The text is a bold name, a `[Type: technology]`
|
|
1713
|
+
* line and the description, each wrapped to the shape's width.
|
|
1714
|
+
*
|
|
1715
|
+
* Text sizes are estimated (no DOM): close to Mermaid's for the default
|
|
1716
|
+
* "Open Sans" font, so the canvas has the same rows, gaps and proportions.
|
|
1717
|
+
*
|
|
1718
|
+
* @module
|
|
1719
|
+
*/
|
|
1720
|
+
/** Mermaid's C4 defaults (`config.c4`). */
|
|
1721
|
+
declare const C4_METRICS: {
|
|
1722
|
+
readonly shapeMargin: 50;
|
|
1723
|
+
readonly shapePadding: 20;
|
|
1724
|
+
readonly width: 216;
|
|
1725
|
+
readonly diagramMarginX: 50;
|
|
1726
|
+
readonly diagramMarginY: 10;
|
|
1727
|
+
readonly shapeInRow: 4;
|
|
1728
|
+
readonly boundaryInRow: 2;
|
|
1729
|
+
readonly nextLinePaddingX: 0;
|
|
1730
|
+
/** Element name size; the type line is 0.75em of it, the description 0.82em. */
|
|
1731
|
+
readonly fontSize: 14;
|
|
1732
|
+
readonly boundaryFontSize: 14;
|
|
1733
|
+
readonly messageFontSize: 12;
|
|
1734
|
+
/** Gap between the name, type and description blocks. */
|
|
1735
|
+
readonly sectionGap: 3;
|
|
1736
|
+
readonly lineHeight: 1.15;
|
|
1737
|
+
/** Mermaid wraps against `screen.availWidth`; used when there is no screen. */
|
|
1738
|
+
readonly screenWidth: 1920;
|
|
1739
|
+
/** Size given to a boundary with nothing in it (Mermaid draws it 0×0). */
|
|
1740
|
+
readonly emptyBoundary: {
|
|
1741
|
+
readonly width: 216;
|
|
1742
|
+
readonly height: 100;
|
|
1743
|
+
};
|
|
1744
|
+
};
|
|
1745
|
+
type C4Base = "person" | "system" | "container" | "component";
|
|
1746
|
+
type C4ShapeKind = "person" | "rounded" | "cylinder" | "h-cyl";
|
|
1747
|
+
/** Mermaid's element type (`external_container_db`…) for an element keyword. */
|
|
1748
|
+
interface C4ElementType {
|
|
1749
|
+
base: C4Base;
|
|
1750
|
+
variant: "" | "db" | "queue";
|
|
1751
|
+
external: boolean;
|
|
1752
|
+
/** `person`, `external_system_db`…, as Mermaid's `typeC4Shape`. */
|
|
1753
|
+
type: string;
|
|
1754
|
+
}
|
|
1755
|
+
declare function c4ElementType(node: GraphNode): C4ElementType;
|
|
1756
|
+
/** Which of the element's text parts a section shows (and edits). */
|
|
1757
|
+
type C4TextPart = "label" | "tech" | "descr";
|
|
1758
|
+
interface C4TextSection {
|
|
1759
|
+
part: C4TextPart;
|
|
1760
|
+
/** The text shown (the type line is `[Container: tech]`). */
|
|
1761
|
+
text: string;
|
|
1762
|
+
lines: string[];
|
|
1763
|
+
fontSize: number;
|
|
1764
|
+
bold: boolean;
|
|
1765
|
+
height: number;
|
|
1766
|
+
}
|
|
1767
|
+
interface C4ElementGeometry {
|
|
1768
|
+
type: C4ElementType;
|
|
1769
|
+
shape: C4ShapeKind;
|
|
1770
|
+
width: number;
|
|
1771
|
+
height: number;
|
|
1772
|
+
/** Width the text wraps at. */
|
|
1773
|
+
wrapWidth: number;
|
|
1774
|
+
sections: C4TextSection[];
|
|
1775
|
+
textHeight: number;
|
|
1776
|
+
/** Centre of the text block, relative to the element's top-left. */
|
|
1777
|
+
textCenter: {
|
|
1778
|
+
x: number;
|
|
1779
|
+
y: number;
|
|
1780
|
+
};
|
|
1781
|
+
/** Person: head radius, where the body starts and its corner radius. */
|
|
1782
|
+
person?: {
|
|
1783
|
+
headRadius: number;
|
|
1784
|
+
bodyTop: number;
|
|
1785
|
+
bodyRadius: number;
|
|
1786
|
+
};
|
|
1787
|
+
/** Cylinders: the end-cap ellipse radii (`rx` along the axis for `h-cyl`). */
|
|
1788
|
+
cylinder?: {
|
|
1789
|
+
rx: number;
|
|
1790
|
+
ry: number;
|
|
1791
|
+
};
|
|
1792
|
+
}
|
|
1793
|
+
/** The `[Type]` / `[Type: technology]` line Mermaid prints under the name. */
|
|
1794
|
+
declare function c4Stereotype(type: C4ElementType, tech?: string): string;
|
|
1795
|
+
/** Size, shape and text layout of one element, as Mermaid computes them. */
|
|
1796
|
+
declare function c4ElementGeometry(node: GraphNode): C4ElementGeometry;
|
|
1797
|
+
interface C4BoundaryText {
|
|
1798
|
+
label: string;
|
|
1799
|
+
/** `[system]`, `[node]`… (Mermaid's default type per boundary keyword). */
|
|
1800
|
+
type: string;
|
|
1801
|
+
descr?: string;
|
|
1802
|
+
/** Centre lines of the label, type and description, from the boundary's top. */
|
|
1803
|
+
labelY: number;
|
|
1804
|
+
typeY: number;
|
|
1805
|
+
descrY?: number;
|
|
1806
|
+
/** Height the texts take above the boundary (Mermaid's `Y`). */
|
|
1807
|
+
height: number;
|
|
1808
|
+
/** Deployment nodes are drawn with a solid border. */
|
|
1809
|
+
solid: boolean;
|
|
1810
|
+
}
|
|
1811
|
+
declare function c4BoundaryText(group: Pick<GraphGroup, "label" | "data">): C4BoundaryText;
|
|
1812
|
+
interface C4Layout extends LayoutResult {
|
|
1813
|
+
elements: Map<string, C4ElementGeometry>;
|
|
1814
|
+
boundaries: Map<string, C4BoundaryText>;
|
|
1815
|
+
}
|
|
1816
|
+
interface C4LayoutOptions {
|
|
1817
|
+
/** Mermaid wraps rows against the screen width (`screen.availWidth`). */
|
|
1818
|
+
screenWidth?: number;
|
|
1819
|
+
}
|
|
1820
|
+
/**
|
|
1821
|
+
* Element and boundary boxes as Mermaid's C4 renderer computes them, then
|
|
1822
|
+
* stored positions (elements the user dragged) on top; boundaries that
|
|
1823
|
+
* contain a moved element are re-fitted around their content with Mermaid's
|
|
1824
|
+
* margins.
|
|
1825
|
+
*/
|
|
1826
|
+
declare function c4Layout(graph: DiagramGraph, meta?: DiagramMeta, options?: C4LayoutOptions): C4Layout;
|
|
1827
|
+
interface Box {
|
|
1828
|
+
x: number;
|
|
1829
|
+
y: number;
|
|
1830
|
+
width: number;
|
|
1831
|
+
height: number;
|
|
1832
|
+
}
|
|
1833
|
+
interface C4RelGeometry {
|
|
1834
|
+
start: {
|
|
1835
|
+
x: number;
|
|
1836
|
+
y: number;
|
|
1837
|
+
};
|
|
1838
|
+
end: {
|
|
1839
|
+
x: number;
|
|
1840
|
+
y: number;
|
|
1841
|
+
};
|
|
1842
|
+
/** Quadratic control point: Mermaid draws every relation but the first as a curve. */
|
|
1843
|
+
control?: {
|
|
1844
|
+
x: number;
|
|
1845
|
+
y: number;
|
|
1846
|
+
};
|
|
1847
|
+
/** Left edge of the label block (Mermaid starts the label at the midpoint), vertically centred. */
|
|
1848
|
+
label: {
|
|
1849
|
+
x: number;
|
|
1850
|
+
y: number;
|
|
1851
|
+
};
|
|
1852
|
+
}
|
|
1853
|
+
/**
|
|
1854
|
+
* A relation between two element boxes: endpoints where the centre-to-centre
|
|
1855
|
+
* line leaves each box, the first relation straight and the others as
|
|
1856
|
+
* Mermaid's quadratic curves, the label at the midpoint.
|
|
1857
|
+
*/
|
|
1858
|
+
declare function c4RelGeometry(from: Box, to: Box, index: number): C4RelGeometry;
|
|
1859
|
+
/**
|
|
1860
|
+
* Mermaid's C4 arrowhead (a 10×10 triangle, `refX` 9) at `tip`, pointing
|
|
1861
|
+
* along the direction from `from` to `tip`; as an SVG `points` list.
|
|
1862
|
+
*/
|
|
1863
|
+
declare function c4ArrowHead(tip: {
|
|
1864
|
+
x: number;
|
|
1865
|
+
y: number;
|
|
1866
|
+
}, from: {
|
|
1867
|
+
x: number;
|
|
1868
|
+
y: number;
|
|
1869
|
+
}): string;
|
|
1870
|
+
|
|
1871
|
+
/**
|
|
1872
|
+
* C4 adapter (`C4Context`, `C4Container`, `C4Component`, `C4Dynamic`,
|
|
1873
|
+
* `C4Deployment`).
|
|
1874
|
+
*
|
|
1875
|
+
* ```
|
|
1876
|
+
* C4Container
|
|
1877
|
+
* title Containers
|
|
1878
|
+
* Person(user, "User")
|
|
1879
|
+
* System_Boundary(sb, "Portal") {
|
|
1880
|
+
* Container(web, "Web app", "React", "The UI")
|
|
1881
|
+
* }
|
|
1882
|
+
* Rel(user, web, "Uses", "HTTPS")
|
|
1883
|
+
* ```
|
|
1884
|
+
*
|
|
1885
|
+
* Canvas model: one node per element (`Person`, `System*`, `Container*`,
|
|
1886
|
+
* `Component*`; id = alias, shape `c4-*`, `data = { kind, descr, tech, extra,
|
|
1887
|
+
* details }`), one group per boundary block (`*_Boundary`, `Boundary`,
|
|
1888
|
+
* `Node*`, `Deployment_Node`; `data = { kind, type, descr }`) and one edge per
|
|
1889
|
+
* relation (`Rel`, `BiRel`, `Rel_Back`, `Rel_U`…, `RelIndex`; `data = { kind,
|
|
1890
|
+
* tech }`). Named `$…` arguments are kept verbatim and re-emitted after the
|
|
1891
|
+
* positional ones. `UpdateRelStyle` / `UpdateElementStyle` lines are kept as
|
|
1892
|
+
* written but dropped with the element or relation they style.
|
|
1893
|
+
*
|
|
1894
|
+
* Mermaid's C4 lexer does not understand `#quot;`, so inner double quotes are
|
|
1895
|
+
* written as `'`.
|
|
1896
|
+
*
|
|
1897
|
+
* For the canvas, `graph.data` carries the diagram type (`c4Type`, e.g.
|
|
1898
|
+
* `C4Dynamic` numbers its relations) and `UpdateLayoutConfig` values
|
|
1899
|
+
* (`c4ShapeInRow`, `c4BoundaryInRow`); `UpdateElementStyle` colours are
|
|
1900
|
+
* mirrored to `node.data.c4Style` (`bgColor`, `fontColor`, `borderColor`) and
|
|
1901
|
+
* `UpdateRelStyle` ones to `edge.data.c4Style` (`textColor`, `lineColor`,
|
|
1902
|
+
* `offsetX`, `offsetY`). The layout is Mermaid's own (see `./geometry`).
|
|
1903
|
+
*
|
|
1904
|
+
* @module
|
|
1905
|
+
*/
|
|
1906
|
+
/** Positional arguments shared by elements, boundaries and relations. */
|
|
1907
|
+
interface Args {
|
|
1908
|
+
label: string;
|
|
1909
|
+
/** Positional values beyond the ones the diagram module models (sprite, tags, link…), unquoted. */
|
|
1910
|
+
rest: string[];
|
|
1911
|
+
/** Named `$key=value` arguments, verbatim. */
|
|
1912
|
+
extra: string[];
|
|
1913
|
+
}
|
|
1914
|
+
type C4Statement = (BaseStatement & {
|
|
1915
|
+
kind: "raw";
|
|
1916
|
+
}) | (BaseStatement & {
|
|
1917
|
+
kind: "title";
|
|
1918
|
+
title: string;
|
|
1919
|
+
}) | (BaseStatement & Args & {
|
|
1920
|
+
kind: "element";
|
|
1921
|
+
keyword: string;
|
|
1922
|
+
alias: string;
|
|
1923
|
+
tech?: string;
|
|
1924
|
+
descr?: string;
|
|
1925
|
+
}) | (BaseStatement & Args & {
|
|
1926
|
+
kind: "boundary";
|
|
1927
|
+
keyword: string;
|
|
1928
|
+
alias: string;
|
|
1929
|
+
type?: string;
|
|
1930
|
+
descr?: string;
|
|
1931
|
+
}) | (BaseStatement & {
|
|
1932
|
+
kind: "close";
|
|
1933
|
+
}) | (BaseStatement & Args & {
|
|
1934
|
+
kind: "rel";
|
|
1935
|
+
keyword: string;
|
|
1936
|
+
/** `RelIndex` sequence number. */
|
|
1937
|
+
index?: string;
|
|
1938
|
+
from: string;
|
|
1939
|
+
to: string;
|
|
1940
|
+
tech?: string;
|
|
1941
|
+
}) | (BaseStatement & {
|
|
1942
|
+
kind: "relStyle";
|
|
1943
|
+
from: string;
|
|
1944
|
+
to: string;
|
|
1945
|
+
rest: string[];
|
|
1946
|
+
}) | (BaseStatement & {
|
|
1947
|
+
kind: "elementStyle";
|
|
1948
|
+
alias: string;
|
|
1949
|
+
});
|
|
1950
|
+
declare const c4Grammar: StatementGrammar<C4Statement>;
|
|
1951
|
+
/** C4 adapter (all five C4 diagram types). */
|
|
1952
|
+
declare const c4Adapter: DiagramAdapter<StatementBody<C4Statement>>;
|
|
1953
|
+
|
|
1954
|
+
/**
|
|
1955
|
+
* `architecture-beta` geometry as Mermaid draws it, shared by the layout and
|
|
1956
|
+
* the canvas.
|
|
1957
|
+
*
|
|
1958
|
+
* Mermaid derives a spatial map from the edges' port sides (`a:R --> L:b`
|
|
1959
|
+
* puts `b` one cell to the right of `a`, `a:B --> T:b` one cell below) and
|
|
1960
|
+
* hands it to cytoscape's fcose layout as alignment and relative-placement
|
|
1961
|
+
* constraints. This module builds the same spatial map and turns it into a
|
|
1962
|
+
* grid deterministically: cells one icon plus the ideal edge length (120px)
|
|
1963
|
+
* apart, more where neighbours sit on either side of a group border; groups
|
|
1964
|
+
* wrap their members (labels included) with Mermaid's padding. Measured
|
|
1965
|
+
* against Mermaid's own output this puts every icon within a few pixels for
|
|
1966
|
+
* typical diagrams. Services are 80px icon squares with the label beneath;
|
|
1967
|
+
* junctions are points.
|
|
1968
|
+
*
|
|
1969
|
+
* @module
|
|
1970
|
+
*/
|
|
1971
|
+
type ArchSide = "L" | "R" | "T" | "B";
|
|
1972
|
+
/** Mermaid's `config.architecture` defaults plus the drawing constants of its renderer. */
|
|
1973
|
+
declare const ARCH_METRICS: {
|
|
1974
|
+
readonly iconSize: 80;
|
|
1975
|
+
readonly padding: 40;
|
|
1976
|
+
/** A group's frame around its members: the padding plus cytoscape's compound border, as Mermaid draws it. */
|
|
1977
|
+
readonly groupPadding: 42.5;
|
|
1978
|
+
readonly fontSize: 16;
|
|
1979
|
+
/** Service labels wrap at 1.5 × the icon size. */
|
|
1980
|
+
readonly labelWidth: 120;
|
|
1981
|
+
readonly lineHeight: 17.6;
|
|
1982
|
+
/** Gap between neighbouring icons (Mermaid's ideal edge length, 1.5 × the icon). */
|
|
1983
|
+
readonly gap: 120;
|
|
1984
|
+
/** Junctions are invisible in Mermaid; the canvas draws a small point. */
|
|
1985
|
+
readonly junctionSize: 12;
|
|
1986
|
+
readonly arrowSize: number;
|
|
1987
|
+
readonly groupIconSize: 30;
|
|
1988
|
+
/** How far `{group}` edges extend past the service, to the group's border. */
|
|
1989
|
+
readonly groupEdgeShift: 44;
|
|
1990
|
+
};
|
|
1991
|
+
/** A service label wrapped as Mermaid wraps it (at 1.5 × the icon size). */
|
|
1992
|
+
declare function serviceLabelLines(label: string): string[];
|
|
1993
|
+
interface ArchitectureLayout extends LayoutResult {
|
|
1994
|
+
/** The spatial map: grid cell of every service and junction (x right, y down). */
|
|
1995
|
+
cells: Map<string, Point>;
|
|
1996
|
+
}
|
|
1997
|
+
/**
|
|
1998
|
+
* Positions and sizes for every service, junction and group, as described
|
|
1999
|
+
* in the module docs; nodes the user dragged keep their stored positions and
|
|
2000
|
+
* groups are re-fitted around their members.
|
|
2001
|
+
*/
|
|
2002
|
+
declare function architectureLayout(graph: DiagramGraph, meta?: DiagramMeta): ArchitectureLayout;
|
|
2003
|
+
interface ArchEdgeRoute {
|
|
2004
|
+
points: {
|
|
2005
|
+
x: number;
|
|
2006
|
+
y: number;
|
|
2007
|
+
}[];
|
|
2008
|
+
/** Where Mermaid puts the title: the middle of the line, or the bend. */
|
|
2009
|
+
label: {
|
|
2010
|
+
x: number;
|
|
2011
|
+
y: number;
|
|
2012
|
+
};
|
|
2013
|
+
/** `X`: horizontal text, `Y`: rotated −90°, `XY`: rotated ±45° at the bend. */
|
|
2014
|
+
axis: "X" | "Y" | "XY";
|
|
2015
|
+
/** Rotation of the title, in degrees. */
|
|
2016
|
+
rotate: number;
|
|
2017
|
+
}
|
|
2018
|
+
/**
|
|
2019
|
+
* The orthogonal line between two ports: straight between aligned ports, an
|
|
2020
|
+
* L with one bend for a horizontal-to-vertical pair (Mermaid's `segments`
|
|
2021
|
+
* edge, bending at the source's axis), and a Z (or U, for same-side ports)
|
|
2022
|
+
* when the ends are no longer aligned after a drag.
|
|
2023
|
+
*/
|
|
2024
|
+
declare function architectureEdgeRoute(s: {
|
|
2025
|
+
x: number;
|
|
2026
|
+
y: number;
|
|
2027
|
+
}, sourceSide: ArchSide, t: {
|
|
2028
|
+
x: number;
|
|
2029
|
+
y: number;
|
|
2030
|
+
}, targetSide: ArchSide): ArchEdgeRoute;
|
|
2031
|
+
/** Mermaid's arrowhead at a port: a triangle pointing into the node, its tip 2px inside. */
|
|
2032
|
+
declare function architectureArrow(point: {
|
|
2033
|
+
x: number;
|
|
2034
|
+
y: number;
|
|
2035
|
+
}, side: ArchSide): string;
|
|
2036
|
+
|
|
2037
|
+
/**
|
|
2038
|
+
* `architecture-beta` adapter.
|
|
2039
|
+
*
|
|
2040
|
+
* ```
|
|
2041
|
+
* architecture-beta
|
|
2042
|
+
* group api(cloud)[API tier]
|
|
2043
|
+
* service db(database)[Postgres] in api
|
|
2044
|
+
* junction j in api
|
|
2045
|
+
* gateway:R --> L:server
|
|
2046
|
+
* ```
|
|
2047
|
+
*
|
|
2048
|
+
* Canvas model: services are nodes (shape `arch-service`, `data.icon`;
|
|
2049
|
+
* `data.untitled` when the declaration has no `[label]`, so the label is the id),
|
|
2050
|
+
* junctions are small circles (shape `sm-circ`, `data.junction`), groups are
|
|
2051
|
+
* groups (`data.icon`, nested with `in`), and edges carry the sides they
|
|
2052
|
+
* attach to (`data.sourceSide` / `targetSide`, `L|R|T|B`) and whether they
|
|
2053
|
+
* leave a group boundary (`{group}` → `data.sourceGroup` / `targetGroup`).
|
|
2054
|
+
* Arrow tokens map to heads: `--` none, `-->` end, `<--` start, `<-->` both.
|
|
2055
|
+
* The optional edge title (`-[label]-`) is the edge label. Icon names
|
|
2056
|
+
* (`cloud`, `logos:aws-lambda`…) are kept verbatim.
|
|
2057
|
+
*
|
|
2058
|
+
* Positions follow Mermaid's arrangement by port sides (see `./geometry`);
|
|
2059
|
+
* a new edge drawn on the canvas gets the sides that face each other there.
|
|
2060
|
+
*
|
|
2061
|
+
* @module
|
|
2062
|
+
*/
|
|
2063
|
+
type Side = "L" | "R" | "T" | "B";
|
|
2064
|
+
type ArchitectureStatement = (BaseStatement & {
|
|
2065
|
+
kind: "raw";
|
|
2066
|
+
}) | (BaseStatement & {
|
|
2067
|
+
kind: "title";
|
|
2068
|
+
title: string;
|
|
2069
|
+
}) | (BaseStatement & {
|
|
2070
|
+
kind: "group" | "service";
|
|
2071
|
+
id: string;
|
|
2072
|
+
icon?: string;
|
|
2073
|
+
label?: string;
|
|
2074
|
+
parent?: string;
|
|
2075
|
+
}) | (BaseStatement & {
|
|
2076
|
+
kind: "junction";
|
|
2077
|
+
id: string;
|
|
2078
|
+
parent?: string;
|
|
2079
|
+
}) | (BaseStatement & {
|
|
2080
|
+
kind: "edge";
|
|
2081
|
+
lhs: string;
|
|
2082
|
+
lhsGroup: boolean;
|
|
2083
|
+
lhsSide: Side;
|
|
2084
|
+
rhs: string;
|
|
2085
|
+
rhsGroup: boolean;
|
|
2086
|
+
rhsSide: Side;
|
|
2087
|
+
arrowStart: boolean;
|
|
2088
|
+
arrowEnd: boolean;
|
|
2089
|
+
label?: string;
|
|
2090
|
+
});
|
|
2091
|
+
declare const architectureGrammar: StatementGrammar<ArchitectureStatement>;
|
|
2092
|
+
/** `architecture-beta` adapter. */
|
|
2093
|
+
declare const architectureAdapter: DiagramAdapter<StatementBody<ArchitectureStatement>>;
|
|
2094
|
+
|
|
2095
|
+
/**
|
|
2096
|
+
* Reading Mermaid `sankey-beta` / `sankey` diagrams into data, for hosts that
|
|
2097
|
+
* draw them with their own components (`familyViews`). Sankey diagrams stay
|
|
2098
|
+
* render-only: the text is kept verbatim and not edited through `EditOp`s.
|
|
2099
|
+
*
|
|
2100
|
+
* The grammar follows Mermaid's: after the header, one CSV record per line,
|
|
2101
|
+
* `source,target,value`. Fields may be double-quoted, which allows commas and
|
|
2102
|
+
* line breaks inside them and `""` for a quote. Fields are trimmed and the
|
|
2103
|
+
* value is read with `parseFloat`. Blank lines and `%%` comment lines are
|
|
2104
|
+
* skipped. Unlike Mermaid, characters outside ASCII are accepted.
|
|
2105
|
+
*
|
|
2106
|
+
* @module
|
|
2107
|
+
*/
|
|
2108
|
+
interface SankeyLink {
|
|
2109
|
+
source: string;
|
|
2110
|
+
target: string;
|
|
2111
|
+
value: number;
|
|
2112
|
+
}
|
|
2113
|
+
interface SankeyData {
|
|
2114
|
+
/** Node names in order of first appearance (a link's source, then its target). */
|
|
2115
|
+
nodes: string[];
|
|
2116
|
+
links: SankeyLink[];
|
|
2117
|
+
}
|
|
2118
|
+
/** What went wrong reading a diagram, with its 1-based line in the source. */
|
|
2119
|
+
interface DiagramDataError {
|
|
2120
|
+
error: string;
|
|
2121
|
+
line?: number;
|
|
2122
|
+
}
|
|
2123
|
+
type SankeyParse = {
|
|
2124
|
+
data: SankeyData;
|
|
2125
|
+
} | DiagramDataError;
|
|
2126
|
+
/**
|
|
2127
|
+
* Reads a sankey diagram's links. `source` is the whole Mermaid text (with
|
|
2128
|
+
* frontmatter and header), e.g. a passthrough document's `doc.source`.
|
|
2129
|
+
* Returns an error for text Mermaid would reject (a record without exactly
|
|
2130
|
+
* three fields, an unterminated quote, no records) or that has no usable
|
|
2131
|
+
* number as its value.
|
|
2132
|
+
*/
|
|
2133
|
+
declare function parseSankey(source: string): SankeyParse;
|
|
2134
|
+
|
|
2135
|
+
/**
|
|
2136
|
+
* Reading Mermaid `treemap-beta` / `treemap` diagrams into data, for hosts
|
|
2137
|
+
* that draw them with their own components (`familyViews`). Treemaps stay
|
|
2138
|
+
* render-only: the text is kept verbatim and not edited through `EditOp`s.
|
|
2139
|
+
*
|
|
2140
|
+
* The grammar follows Mermaid's: one item per line, nested by indentation.
|
|
2141
|
+
* A section is a quoted name (`"Sales"` or `'Sales'`); a leaf adds a value
|
|
2142
|
+
* after `:` or `,` (`"Q1": 1,200`, commas in the number are dropped). Either
|
|
2143
|
+
* may end with a `:::class`. `title`, `accTitle` and `accDescr` lines are
|
|
2144
|
+
* read; `classDef` lines and `%%` comments are skipped. Styling is not
|
|
2145
|
+
* returned.
|
|
2146
|
+
*
|
|
2147
|
+
* @module
|
|
2148
|
+
*/
|
|
2149
|
+
interface TreemapItem {
|
|
2150
|
+
name: string;
|
|
2151
|
+
/** Leaves only. */
|
|
2152
|
+
value?: number;
|
|
2153
|
+
/** Sections only (possibly empty). */
|
|
2154
|
+
children?: TreemapItem[];
|
|
2155
|
+
/** The `:::class` the item names, if any. */
|
|
2156
|
+
className?: string;
|
|
2157
|
+
}
|
|
2158
|
+
interface TreemapData {
|
|
2159
|
+
/** `title` line in the body (frontmatter titles stay on `doc.graph.title`). */
|
|
2160
|
+
title?: string;
|
|
2161
|
+
accTitle?: string;
|
|
2162
|
+
accDescr?: string;
|
|
2163
|
+
/** Top-level items; Mermaid allows several. */
|
|
2164
|
+
items: TreemapItem[];
|
|
2165
|
+
}
|
|
2166
|
+
type TreemapParse = {
|
|
2167
|
+
data: TreemapData;
|
|
2168
|
+
} | DiagramDataError;
|
|
2169
|
+
/**
|
|
2170
|
+
* Reads a treemap's items. `source` is the whole Mermaid text (with
|
|
2171
|
+
* frontmatter and header), e.g. a passthrough document's `doc.source`.
|
|
2172
|
+
* Returns an error for a line Mermaid would reject (an unquoted name, a
|
|
2173
|
+
* missing or negative value) or when there are no items.
|
|
2174
|
+
*/
|
|
2175
|
+
declare function parseTreemap(source: string): TreemapParse;
|
|
2176
|
+
/** A treemap item's value: a leaf's own, or the sum of a section's leaves. */
|
|
2177
|
+
declare function treemapValue(item: TreemapItem): number;
|
|
2178
|
+
|
|
473
2179
|
/** Body of a render-only document: the raw body lines. */
|
|
474
2180
|
interface PassthroughBody {
|
|
475
2181
|
lines: string[];
|
|
@@ -480,12 +2186,17 @@ interface PassthroughBody {
|
|
|
480
2186
|
*/
|
|
481
2187
|
declare function createPassthroughAdapter(family: DiagramFamily, tier?: SupportTier): DiagramAdapter<PassthroughBody>;
|
|
482
2188
|
|
|
483
|
-
/** Families that can be edited
|
|
484
|
-
declare const EDITABLE_DIAGRAM_FAMILIES: readonly ["flowchart", "state", "class", "er"];
|
|
485
|
-
/**
|
|
2189
|
+
/** Families that can be edited statement by statement; every other family is kept as text. */
|
|
2190
|
+
declare const EDITABLE_DIAGRAM_FAMILIES: readonly ["flowchart", "state", "class", "er", "pie", "mindmap", "quadrant", "c4", "architecture", "sequence", "gitGraph", "gantt", "timeline", "journey", "xychart", "radar"];
|
|
2191
|
+
/**
|
|
2192
|
+
* The shapes a node of `family` can take (`setNodeShape`), as canonical names. Empty when
|
|
2193
|
+
* the family has nothing to choose between (class boxes, ER entities, pie slices…).
|
|
2194
|
+
*/
|
|
486
2195
|
declare function diagramShapes(family: DiagramFamily): string[];
|
|
487
|
-
/** Whether the family has groups (subgraphs, composite states, namespaces
|
|
2196
|
+
/** Whether the family has groups (subgraphs, composite states, namespaces, boxes, sections…). */
|
|
488
2197
|
declare function diagramSupportsGroups(family: DiagramFamily): boolean;
|
|
2198
|
+
/** Whether the family has a direction (`setDirection`): false for families whose positions follow their data (pie, sequence, Gantt…). */
|
|
2199
|
+
declare function diagramSupportsDirection(family: DiagramFamily): boolean;
|
|
489
2200
|
/**
|
|
490
2201
|
* Checks an edit against the document before it is applied. Returns a sentence saying
|
|
491
2202
|
* what is wrong and how to fix it, or `null` when the edit is valid. Ids are checked
|
|
@@ -508,7 +2219,7 @@ interface DiagramState {
|
|
|
508
2219
|
/** The Mermaid text, always in step with `document`. */
|
|
509
2220
|
source: string;
|
|
510
2221
|
family: DiagramFamily;
|
|
511
|
-
/** True for
|
|
2222
|
+
/** True for families with an adapter (see {@link EDITABLE_DIAGRAM_FAMILIES}) that are not read-only. */
|
|
512
2223
|
editable: boolean;
|
|
513
2224
|
readOnly: boolean;
|
|
514
2225
|
/** Selected node, group or edge ids. */
|
|
@@ -743,7 +2454,20 @@ declare function describeDiagram(doc: MermaidDocument): {
|
|
|
743
2454
|
severity: "info" | "error" | "warning";
|
|
744
2455
|
message: string;
|
|
745
2456
|
}[] | undefined;
|
|
2457
|
+
positions: {
|
|
2458
|
+
[k: string]: {
|
|
2459
|
+
x: number;
|
|
2460
|
+
y: number;
|
|
2461
|
+
};
|
|
2462
|
+
};
|
|
2463
|
+
fields?: {
|
|
2464
|
+
diagram?: FieldDescription[] | undefined;
|
|
2465
|
+
edge?: FieldDescription[] | undefined;
|
|
2466
|
+
node?: FieldDescription[] | undefined;
|
|
2467
|
+
} | undefined;
|
|
2468
|
+
settings?: Record<string, unknown> | undefined;
|
|
746
2469
|
nodes: {
|
|
2470
|
+
data?: Record<string, unknown> | undefined;
|
|
747
2471
|
synthetic?: boolean | undefined;
|
|
748
2472
|
styles?: string[] | undefined;
|
|
749
2473
|
classes?: string[] | undefined;
|
|
@@ -753,6 +2477,7 @@ declare function describeDiagram(doc: MermaidDocument): {
|
|
|
753
2477
|
shape: string;
|
|
754
2478
|
}[];
|
|
755
2479
|
edges: {
|
|
2480
|
+
data?: Record<string, unknown> | undefined;
|
|
756
2481
|
pattern: EdgePattern;
|
|
757
2482
|
arrowEnd: ArrowHead;
|
|
758
2483
|
label?: string | undefined;
|
|
@@ -767,12 +2492,6 @@ declare function describeDiagram(doc: MermaidDocument): {
|
|
|
767
2492
|
label: string;
|
|
768
2493
|
}[];
|
|
769
2494
|
shapes: string[];
|
|
770
|
-
positions: {
|
|
771
|
-
[k: string]: {
|
|
772
|
-
x: number;
|
|
773
|
-
y: number;
|
|
774
|
-
};
|
|
775
|
-
};
|
|
776
2495
|
title?: string | undefined;
|
|
777
2496
|
family: DiagramFamily;
|
|
778
2497
|
editable: boolean;
|
|
@@ -807,4 +2526,4 @@ declare function draftFrames(current: string, target: string, options?: DraftOpt
|
|
|
807
2526
|
/** Ids of nodes and groups in `after` that are new or changed since `before`. */
|
|
808
2527
|
declare function changedItems(before: DiagramGraph, after: DiagramGraph): string[];
|
|
809
2528
|
|
|
810
|
-
export { ArrowHead, CLASS_RELATIONS, type Chain, type ClassMember, type ClassRelation, type DiagramActionResult, DiagramAdapter, DiagramController, type DiagramControllerOptions, DiagramDirector, type DiagramDirectorOptions, DiagramFamily, DiagramGraph, DiagramMeta, type DiagramPerformanceResult, type DiagramPerformanceStep, type DiagramPlacement, type DiagramState, type DiagramToolProviderOptions, type DraftOptions, EDITABLE_DIAGRAM_FAMILIES, ER_CARDINALITIES, ER_PATTERNS, EdgePattern, type EdgeSpec, EditOp, type ErAttribute, FLOWCHART_SHAPES, type FlowStatement, type FlowchartBody, type FlowchartDocument, type FoundMermaid, GraphEdge, type LineBody, type LineDocument, type LineGrammar, type LineStatement, type LinkRef, type LinkSpec, META_COMMENT_PREFIX, META_FRONTMATTER_KEY, MermaidDocument, MetaCarrier, type NodeDecl, type NodeRef, type ParseOptions, type PassthroughBody, Point, Preamble, PresenceActorInfo, PresenceClock, PresenceStore, STATE_SHAPES, type ShapeDef, type SplitSource, SupportTier, applyEdit, applyEdits, canonicalShape, changedItems, classGrammar, createDiagramToolProvider, createLineAdapter, createPassthroughAdapter, describeDiagram, detectFamily, detectFamilyFromHeader, diagramShapes, diagramSupportsGroups, draftFrames, emptyMeta, erGrammar, findMermaidSources, flowchartAdapter, formatChain, formatLink, formatNode, getDiagramAdapter, isMetaEmpty, mergeMeta, parseAttributes, parseChain, parseFlowchartSource, parseLink, parseMembers, parseMermaid, parseStatement, planDiagramEdit, planDiagramEdits, quoteLabelIfNeeded, registerDiagramAdapter, relationFor, resolveShape, serializeMermaid, serializeMeta, splitSource, splitStatements, stateGrammar, supportTierOf, validateDiagramEdit };
|
|
2529
|
+
export { ARCH_METRICS, AdapterParseContext, type ArchSide, type ArchitectureStatement, ArrowHead, type BaseStatement, type C4Statement, C4_METRICS, CLASS_RELATIONS, type Chain, type ClassMember, type ClassRelation, Diagnostic, type DiagramActionResult, DiagramAdapter, DiagramController, type DiagramControllerOptions, type DiagramDataError, DiagramDirector, type DiagramDirectorOptions, DiagramFamily, DiagramGraph, DiagramMeta, type DiagramPerformanceResult, type DiagramPerformanceStep, type DiagramPlacement, type DiagramState, type DiagramToolProviderOptions, type DraftOptions, EDITABLE_DIAGRAM_FAMILIES, ER_CARDINALITIES, ER_PATTERNS, type EdgeKindOption, EdgePattern, type EdgeSpec, type EditContext, EditOp, type ErAttribute, FAMILY_BLANKS, FAMILY_DESCRIPTIONS, FAMILY_TEMPLATES, FAMILY_TITLES, FLOWCHART_SHAPES, type FamilyLayout, type FamilyLayoutOptions, type FamilyUI, type FieldDescription, type FieldSpec, type FlowStatement, type FlowchartBody, type FlowchartDocument, type FoundMermaid, GANTT_CONFIG_KEYS, GANTT_METRICS, GANTT_TAGS, type GanttConfig, type GanttStatement, type GanttTask, type GitStatement, type GraphBuildContext, GraphEdge, GraphGroup, GraphNode, type JourneyStatement, type JourneyTask, type LayoutResult, type LineBody, type LineDocument, type LineGrammar, type LineStatement, type LinkRef, type LinkSpec, META_COMMENT_PREFIX, META_FRONTMATTER_KEY, MermaidDocument, MetaCarrier, type MindmapForm, type MindmapStatement, type NodeDecl, type NodeRef, POINT_BOX, type ParseOptions, type PassthroughBody, type PieStatement, Point, Preamble, PresenceActorInfo, PresenceClock, PresenceStore, QUADRANT_METRICS, type QuadrantChartStatement, type QuadrantGeometry, type QuadrantSpace, RADAR_CHART_BOX, type RadarStatement, SEQUENCE_METRICS, STATE_SHAPES, type SankeyData, type SankeyLink, type SankeyParse, type SequenceEvent, type SequenceStatement, type ShapeDef, type ShapeOption, type Size, type SplitSource, type StatementBody, type StatementDocument, type StatementGrammar, SupportTier, type TimelinePeriod, type TimelineStatement, type TreemapData, type TreemapItem, type TreemapParse, XY_CHART_BOX, type XySeriesKind, type XyStatement, afterIds, applyEdit, applyEdits, applyStatementEdit, architectureAdapter, architectureArrow, architectureEdgeRoute, architectureGrammar, architectureLayout, architectureUI, c4Adapter, c4ArrowHead, c4BoundaryText, c4ElementGeometry, c4ElementType, c4Grammar, c4Layout, c4RelGeometry, c4Stereotype, c4UI, canonicalShape, changedItems, checkFieldData, classGrammar, classUI, createDiagramToolProvider, createLineAdapter, createPassthroughAdapter, createStatementAdapter, describeDiagram, describeFields, detectFamily, detectFamilyFromHeader, diagramShapes, diagramSupportsDirection, diagramSupportsGroups, draftFrames, dropMetaKeys, emptyMeta, erGrammar, erUI, familyUI, filterInPlace, findMermaidSources, flowchartAdapter, flowchartUI, formatAxis, formatChain, formatGanttDate, formatLink, formatNode, ganttAdapter, ganttGeometry, ganttGrammar, ganttUI, getDiagramAdapter, getFamilyLayout, gitGraphAdapter, gitGraphGrammar, gitGraphUI, indentOf, isMetaEmpty, journeyAdapter, journeyGrammar, journeyLayout, journeyUI, mergeMeta, mindmapAdapter, mindmapGrammar, mindmapUI, parseAttributes, parseChain, parseFlowchartSource, parseGanttDate, parseLink, parseMembers, parseMermaid, parseSankey, parseStatement, parseStatementDocument, parseTreemap, pickFieldData, pieAdapter, pieGrammar, pieUI, planDiagramEdit, planDiagramEdits, pointCentre, pointPosition, positionToData, quadrantAdapter, quadrantGeometry, quadrantGrammar, quadrantSpace, quadrantUI, quote, quoteLabelIfNeeded, radarAdapter, radarGrammar, radarUI, registerDiagramAdapter, registerFamilyLayout, relationFor, renameMetaKey, resolveShape, sequenceAdapter, sequenceGeometry, sequenceGrammar, sequenceUI, serializeMermaid, serializeMeta, serializeStatementDocument, serviceLabelLines, sharedFrameLayout, slugId, spaceInput, splitOutsideQuotes, splitSource, splitStatements, stateGrammar, stateUI, supportTierOf, timelineAdapter, timelineGrammar, timelineLayout, timelineUI, treemapValue, uniqueId, unquote, validateDiagramEdit, xyChartAdapter, xyChartGrammar, xyChartUI };
|