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