Skip to content
D
Documentation

Dsl — types

reference
2 min readUpdated

Types

Import these from @grafloria/engine.

Types

ArchSide

Also has every member of String, listed on its own entry.

ts
type ArchSide = 'T' | 'B' | 'L' | 'R';

ASTDirection

Also has every member of String, listed on its own entry.

Abstract Syntax Tree (AST) Node Definitions

Represents the parsed structure of diagram DSL code

ts
type Direction = 'TD' | 'TB' | 'BT' | 'RL' | 'LR';

BlockCell

ts
type BlockCell =

  | { kind: 'block'; id: string; token: string; span: number; raw?: string }
  | { kind: 'space'; span: number }

  | { kind: 'group'; id: string; span: number; columns?: number; cells: BlockCell[]; label?: string; labelToken?: string };

Properties

NameTypeDefaultDescription
kind'block'
spannumber

DiagramChangeCallback

ts
type DiagramChangeCallback = (diagram: DiagramModel) => void;

DiagramType

Also has every member of String, listed on its own entry.

ts
type DiagramType = 'flowchart' | 'bpmn' | 'erd' | 'classDiagram';

EditSource

Also has every member of String, listed on its own entry.

ts
type EditSource = 'text' | 'visual' | 'none';

ErCardinalityMarker

Also has every member of String, listed on its own entry.

The renderer/kit marker vocabulary these tokens denote.

ts
type ErCardinalityMarker = 'one' | 'zero-or-one' | 'zero-or-many' | 'one-or-many';

LinkType

Also has every member of String, listed on its own entry.

Link/Edge type mapping

ts
type LinkType =
  | 'arrow'
  | 'line'
  | 'dotted-arrow'
  | 'dotted-line'
  | 'thick-arrow'
  | 'thick-line'
  | 'bidirectional'
  | 'circle-edge'
  | 'cross-edge';

MermaidArchService

Also has every member of MermaidArchGroup, listed on its own entry.

ts
type MermaidArchService = MermaidArchGroup;

NodeShape

Also has every member of String, listed on its own entry.

Node shape type mapping to Mermaid syntax

ts
type NodeShape =
  | 'text'
  | 'rectangle'
  | 'rounded-rectangle'
  | 'stadium'
  | 'subroutine'
  | 'cylindrical'
  | 'circle'
  | 'asymmetric'
  | 'rhombus'
  | 'hexagon'
  | 'trapezoid'
  | 'trapezoid-alt'
  | 'parallelogram'
  | 'parallelogram-alt';

StateKind

Also has every member of String, listed on its own entry.

ts
type StateKind =
  | 'state' | 'start' | 'end' | 'choice' | 'fork' | 'join' | 'history' | 'deep-history';

StatementNode

Also has every member of NodeDefinitionNode, ASTNode, listed on their own entries.

Statement types

ts
type StatementNode =
  | NodeDefinitionNode
  | EdgeDefinitionNode
  | SubgraphNode
  | StyleNode
  | ClassDefNode
  | ClassApplicationNode
  | LinkStyleNode
  | ClickNode
  | GrafloriaDirectiveNode;

StatusCallback

ts
type StatusCallback = (status: SyncStatus) => void;

StatusChangeCallback

ts
type StatusChangeCallback = (status: SyncStatus) => void;

SyncCallback

ts
type SyncCallback = (direction: SyncDirection, success: boolean) => void;

SyncDirection

Also has every member of String, listed on its own entry.

ts
type SyncDirection = 'text-to-visual' | 'visual-to-text' | 'none';

TextChangeCallback

ts
type TextChangeCallback = (text: string) => void;

UmlKind

Also has every member of String, listed on its own entry.

The diagram kit's relationship vocabulary.

ts
type UmlKind =
  | 'inheritance' | 'realization' | 'association' | 'directed-association'
  | 'aggregation' | 'composition' | 'dependency';

UmlLeftMarker

Also has every member of String, listed on its own entry.

Mermaid's class relationship grammar is COMPOSITIONAL, not a fixed list:

relation := relationType? lineType relationType?

with relationType ∈ {<|/|> extension, * composition, o aggregation, </> dependency, () lollipop} and lineType ∈ {-- solid, .. dotted}. That is 72 legal spellings, every one of which mermaid 11.16 accepts (verified operator-by-operator against the real parser). The previous hand-written table listed 17 of them, and a line using any of the other 55 — A <|--* B, A o--|> B, the whole lollipop family — matched no rule at all, so the line was skipped and BOTH classes vanished: an empty diagram, silently.

ts
type UmlLeftMarker = '' | '<|' | '*' | 'o' | '<' | '()';

UmlLineType

Also has every member of String, listed on its own entry.

ts
type UmlLineType = '--' | '..';

UmlOperator

Also has every member of String, listed on its own entry.

The literal Mermaid operator, kept so generation is not a guess.

ts
type UmlOperator = `${UmlLeftMarker}${UmlLineType}${UmlRightMarker}`;

UmlRightMarker

Also has every member of String, listed on its own entry.

ts
type UmlRightMarker = '' | '|>' | '*' | 'o' | '>' | '()';

Was this page helpful?

Dsl — types — Grafloria