9.6 KB189 lines
Blame
1---
2references:
3 - "File: /packages/mermaid/src/diagrams/flowchart/flowDiagram.ts"
4 - "File: /packages/mermaid/src/diagrams/flowchart/flowDb.ts"
5 - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector.ts"
6 - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts"
7 - "File: /packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts"
8 - "File: /packages/mermaid/src/diagrams/flowchart/styles.ts"
9 - "File: /packages/mermaid/src/diagrams/flowchart/types.ts"
10 - "File: /packages/mermaid/src/diagrams/flowchart/flowChartShapes.js"
11 - "File: /packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts"
12 - "File: /packages/mermaid/src/diagrams/flowchart/elk/detector.ts"
13generationTime: 2025-07-23T10:31:53.266Z
14---
15flowchart TD
16 %% Entry Points and Detection
17 Input["User Input Text"] --> Detection{Detection Phase}
18
19 Detection --> flowDetector["flowDetector.ts<br/>detector(txt, config)"]
20 Detection --> flowDetectorV2["flowDetector-v2.ts<br/>detector(txt, config)"]
21 Detection --> elkDetector["elk/detector.ts<br/>detector(txt, config)"]
22
23 flowDetector --> |"Checks /^\s*graph/"| DetectLegacy{Legacy Flowchart?}
24 flowDetectorV2 --> |"Checks /^\s*flowchart/"| DetectNew{New Flowchart?}
25 elkDetector --> |"Checks /^\s*flowchart-elk/"| DetectElk{ELK Layout?}
26
27 DetectLegacy --> |Yes| LoadDiagram
28 DetectNew --> |Yes| LoadDiagram
29 DetectElk --> |Yes| LoadDiagram
30
31 %% Loading Phase
32 LoadDiagram["loader() function"] --> flowDiagram["flowDiagram.ts<br/>diagram object"]
33
34 flowDiagram --> DiagramStructure{Diagram Components}
35 DiagramStructure --> Parser["parser: flowParser"]
36 DiagramStructure --> Database["db: new FlowDB()"]
37 DiagramStructure --> Renderer["renderer: flowRenderer-v3-unified"]
38 DiagramStructure --> Styles["styles: flowStyles"]
39 DiagramStructure --> Init["init: (cnf: MermaidConfig)"]
40
41 %% Parser Phase
42 Parser --> flowParser["parser/flowParser.ts<br/>newParser.parse(src)"]
43 flowParser --> |"Preprocesses src"| RemoveWhitespace["Remove trailing whitespace<br/>src.replace(/}\s*\n/g, '}\n')"]
44 RemoveWhitespace --> flowJison["parser/flow.jison<br/>flowJisonParser.parse(newSrc)"]
45
46 flowJison --> ParseGraph["Parse Graph Structure"]
47 ParseGraph --> ParseVertices["Parse Vertices"]
48 ParseGraph --> ParseEdges["Parse Edges"]
49 ParseGraph --> ParseSubgraphs["Parse Subgraphs"]
50 ParseGraph --> ParseClasses["Parse Classes"]
51 ParseGraph --> ParseStyles["Parse Styles"]
52
53 %% Database Phase - FlowDB Class
54 Database --> FlowDBClass["flowDb.ts<br/>FlowDB class"]
55
56 FlowDBClass --> DBInit["constructor()<br/>- Initialize counters<br/>- Bind methods<br/>- Setup toolTips<br/>- Call clear()"]
57
58 DBInit --> DBMethods{FlowDB Methods}
59
60 DBMethods --> addVertex["addVertex(id, textObj, type, style,<br/>classes, dir, props, metadata)"]
61 DBMethods --> addLink["addLink(_start[], _end[], linkData)"]
62 DBMethods --> addSingleLink["addSingleLink(_start, _end, type, id)"]
63 DBMethods --> setDirection["setDirection(dir)"]
64 DBMethods --> addSubGraph["addSubGraph(nodes[], id, title)"]
65 DBMethods --> addClass["addClass(id, style)"]
66 DBMethods --> setClass["setClass(ids, className)"]
67 DBMethods --> setTooltip["setTooltip(ids, tooltip)"]
68 DBMethods --> setClickEvent["setClickEvent(id, functionName, args)"]
69 DBMethods --> setClickFun["setClickFun(id, functionName, args)"]
70
71 %% Vertex Processing
72 addVertex --> VertexProcess{Vertex Processing}
73 VertexProcess --> CreateVertex["Create FlowVertex object<br/>- id, labelType, domId<br/>- styles[], classes[]"]
74 VertexProcess --> SanitizeText["sanitizeText(textObj.text)"]
75 VertexProcess --> ParseMetadata["Parse YAML metadata<br/>yaml.load(yamlData)"]
76 VertexProcess --> SetVertexProps["Set vertex properties<br/>- shape, label, icon, form<br/>- pos, img, constraint, w, h"]
77
78 %% Edge Processing
79 addSingleLink --> EdgeProcess{Edge Processing}
80 EdgeProcess --> CreateEdge["Create FlowEdge object<br/>- start, end, type, text<br/>- labelType, classes[]"]
81 EdgeProcess --> ProcessLinkText["Process link text<br/>- sanitizeText()<br/>- strip quotes"]
82 EdgeProcess --> SetEdgeProps["Set edge properties<br/>- type, stroke, length"]
83 EdgeProcess --> GenerateEdgeId["Generate edge ID<br/>getEdgeId(start, end, counter)"]
84 EdgeProcess --> ValidateEdgeLimit["Validate edge limit<br/>maxEdges check"]
85
86 %% Data Collection
87 DBMethods --> GetData["getData()"]
88 GetData --> CollectNodes["Collect nodes[] from vertices"]
89 GetData --> CollectEdges["Collect edges[] from edges"]
90 GetData --> ProcessSubGraphs["Process subgraphs<br/>- parentDB Map<br/>- subGraphDB Map"]
91 GetData --> AddNodeFromVertex["addNodeFromVertex()<br/>for each vertex"]
92 GetData --> ProcessEdgeTypes["destructEdgeType()<br/>arrowTypeStart, arrowTypeEnd"]
93
94 %% Node Creation
95 AddNodeFromVertex --> NodeCreation{Node Creation}
96 NodeCreation --> FindExistingNode["findNode(nodes, vertex.id)"]
97 NodeCreation --> CreateBaseNode["Create base node<br/>- id, label, parentId<br/>- cssStyles, cssClasses<br/>- shape, domId, tooltip"]
98 NodeCreation --> GetCompiledStyles["getCompiledStyles(classDefs)"]
99 NodeCreation --> GetTypeFromVertex["getTypeFromVertex(vertex)"]
100
101 %% Rendering Phase
102 Renderer --> flowRendererV3["flowRenderer-v3-unified.ts<br/>draw(text, id, version, diag)"]
103
104 flowRendererV3 --> RenderInit["Initialize rendering<br/>- getConfig()<br/>- handle securityLevel<br/>- getDiagramElement()"]
105
106 RenderInit --> GetLayoutData["diag.db.getData()<br/>as LayoutData"]
107 GetLayoutData --> SetupLayoutData["Setup layout data<br/>- type, layoutAlgorithm<br/>- direction, spacing<br/>- markers, diagramId"]
108
109 SetupLayoutData --> CallRender["render(data4Layout, svg)"]
110 CallRender --> SetupViewPort["setupViewPortForSVG(svg, padding)"]
111 SetupViewPort --> ProcessLinks["Process vertex links<br/>- create anchor elements<br/>- handle click events"]
112
113 %% Shape Rendering
114 CallRender --> ShapeSystem["flowChartShapes.js<br/>Shape Functions"]
115
116 ShapeSystem --> ShapeFunctions{Shape Functions}
117 ShapeFunctions --> question["question(parent, bbox, node)"]
118 ShapeFunctions --> hexagon["hexagon(parent, bbox, node)"]
119 ShapeFunctions --> rect_left_inv_arrow["rect_left_inv_arrow(parent, bbox, node)"]
120 ShapeFunctions --> lean_right["lean_right(parent, bbox, node)"]
121 ShapeFunctions --> lean_left["lean_left(parent, bbox, node)"]
122
123 ShapeFunctions --> insertPolygonShape["insertPolygonShape(parent, w, h, points)"]
124 ShapeFunctions --> intersectPolygon["intersectPolygon(node, points, point)"]
125 ShapeFunctions --> intersectRect["intersectRect(node, point)"]
126
127 %% Styling System
128 Styles --> stylesTS["styles.ts<br/>getStyles(options)"]
129 stylesTS --> StyleOptions["FlowChartStyleOptions<br/>- arrowheadColor, border2<br/>- clusterBkg, mainBkg<br/>- fontFamily, textColor"]
130
131 StyleOptions --> GenerateCSS["Generate CSS styles<br/>- .label, .cluster-label<br/>- .node, .edgePath<br/>- .flowchart-link, .edgeLabel"]
132 GenerateCSS --> GetIconStyles["getIconStyles()"]
133
134 %% Type System
135 Parser --> TypeSystem["types.ts<br/>Type Definitions"]
136 TypeSystem --> FlowVertex["FlowVertex interface"]
137 TypeSystem --> FlowEdge["FlowEdge interface"]
138 TypeSystem --> FlowClass["FlowClass interface"]
139 TypeSystem --> FlowSubGraph["FlowSubGraph interface"]
140 TypeSystem --> FlowVertexTypeParam["FlowVertexTypeParam<br/>Shape types"]
141
142 %% Utility Functions
143 DBMethods --> UtilityFunctions{Utility Functions}
144 UtilityFunctions --> lookUpDomId["lookUpDomId(id)"]
145 UtilityFunctions --> getClasses["getClasses()"]
146 UtilityFunctions --> getDirection["getDirection()"]
147 UtilityFunctions --> getVertices["getVertices()"]
148 UtilityFunctions --> getEdges["getEdges()"]
149 UtilityFunctions --> getSubGraphs["getSubGraphs()"]
150 UtilityFunctions --> clear["clear()"]
151 UtilityFunctions --> defaultConfig["defaultConfig()"]
152
153 %% Event Handling
154 ProcessLinks --> EventHandling{Event Handling}
155 EventHandling --> setupToolTips["setupToolTips(element)"]
156 EventHandling --> bindFunctions["bindFunctions(element)"]
157 EventHandling --> runFunc["utils.runFunc(functionName, args)"]
158
159 %% Common Database Functions
160 DBMethods --> CommonDB["commonDb.js functions"]
161 CommonDB --> setAccTitle["setAccTitle()"]
162 CommonDB --> getAccTitle["getAccTitle()"]
163 CommonDB --> setAccDescription["setAccDescription()"]
164 CommonDB --> getAccDescription["getAccDescription()"]
165 CommonDB --> setDiagramTitle["setDiagramTitle()"]
166 CommonDB --> getDiagramTitle["getDiagramTitle()"]
167 CommonDB --> commonClear["clear()"]
168
169 %% Final Output
170 ProcessLinks --> FinalSVG["Final SVG Output"]
171
172 %% Layout Algorithm Selection
173 SetupLayoutData --> LayoutAlgorithm{Layout Algorithm}
174 LayoutAlgorithm --> Dagre["dagre<br/>(default)"]
175 LayoutAlgorithm --> DagreWrapper["dagre-wrapper<br/>(v2 renderer)"]
176 LayoutAlgorithm --> ELK["elk<br/>(external package)"]
177
178 %% Testing Components
179 FlowDBClass --> TestFiles["Test Files"]
180 TestFiles --> flowDbSpec["flowDb.spec.ts"]
181 TestFiles --> flowChartShapesSpec["flowChartShapes.spec.js"]
182 TestFiles --> ParserTests["parser/*.spec.js files<br/>- flow-text.spec.js<br/>- flow-edges.spec.js<br/>- flow-style.spec.js<br/>- subgraph.spec.js"]
183
184 %% Configuration
185 Init --> ConfigSetup["Configuration Setup"]
186 ConfigSetup --> FlowchartConfig["cnf.flowchart config"]
187 ConfigSetup --> ArrowMarkers["arrowMarkerAbsolute"]
188 ConfigSetup --> LayoutConfig["layout config"]
189 ConfigSetup --> SetConfig["setConfig() calls"]