6.0 KB180 lines
Blame
1---
2references:
3 - "File: /packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts"
4 - "File: /packages/mermaid/src/diagrams/mindmap/mindmapDb.ts"
5 - "File: /packages/mermaid/src/diagrams/mindmap/detector.ts"
6 - "File: /packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts"
7 - "File: /packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts"
8 - "File: /packages/mermaid/src/diagrams/mindmap/styles.ts"
9 - "File: /packages/mermaid/src/diagrams/mindmap/svgDraw.ts"
10generationTime: 2025-01-28T16:00:00.000Z
11---
12sequenceDiagram
13 participant User as User Input Text
14 participant Detector as detector.ts
15 participant Loader as DiagramLoader
16 participant Definition as mindmap-definition.ts
17 participant Parser as parser/mindmap.jison
18 participant DB as MindmapDB
19 participant Renderer as mindmapRenderer.ts
20 participant Cytoscape as cytoscape.js
21 participant SVGDraw as svgDraw.ts
22 participant Styles as styles.ts
23 participant Output as Final SVG
24
25 Note over User, Output: Mindmap Implementation Flow
26
27 %% Detection Phase
28 User->>Detector: /^\s*mindmap/ text input
29 activate Detector
30 Detector->>Detector: detector(txt) validates pattern
31 Detector->>Loader: loader() function called
32 deactivate Detector
33
34 activate Loader
35 Loader->>Definition: import mindmap-definition.js
36 deactivate Loader
37
38 %% Core Structure Setup
39 activate Definition
40 Definition->>DB: get db() → new MindmapDB()
41 Definition->>Renderer: setup renderer
42 Definition->>Parser: setup parser
43 Definition->>Styles: setup styles
44 deactivate Definition
45
46 %% Database Initialization
47 activate DB
48 Note over DB: MindmapDB Constructor
49 DB->>DB: initialize nodes array
50 DB->>DB: setup nodeType constants
51 DB->>DB: bind methods
52 DB->>DB: clear() state
53
54 %% Parsing Phase
55 activate Parser
56 User->>Parser: mindmap syntax text
57
58 loop For each node in hierarchy
59 Parser->>DB: addNode(level, id, descr, type)
60 activate DB
61 DB->>DB: sanitizeText(id, descr)
62 DB->>DB: getType(startStr, endStr)
63 Note right of DB: Shape Detection:<br/>[ → RECT<br/>( → ROUNDED_RECT<br/>(( → CIRCLE<br/>)) → BANG<br/>{{ → HEXAGON
64 DB->>DB: getParent(level)
65 DB->>DB: create MindmapNode
66 DB->>DB: add to hierarchy
67 deactivate DB
68 end
69
70 opt Icon/Class Decoration
71 Parser->>DB: decorateNode(decoration)
72 DB->>DB: set icon/class properties
73 end
74 deactivate Parser
75
76 %% Data Preparation
77 Renderer->>DB: getData() for layout
78 activate DB
79 DB->>DB: collect all nodes
80 DB->>DB: build parent-child relationships
81 DB-->>Renderer: return node hierarchy
82 deactivate DB
83
84 %% Rendering Pipeline
85 activate Renderer
86 Note over Renderer: Rendering Phase
87
88 Renderer->>Cytoscape: initialize cytoscape
89 activate Cytoscape
90
91 loop For each node in mindmap
92 Renderer->>Cytoscape: addNodes(mindmap, cy, conf, level)
93 Cytoscape->>Cytoscape: create node data
94 Cytoscape->>Cytoscape: set position (x, y)
95 end
96
97 loop For parent-child relationships
98 Renderer->>Cytoscape: add edges
99 Cytoscape->>Cytoscape: create edge data
100 end
101
102 Renderer->>Cytoscape: configure cose-bilkent layout
103 Cytoscape->>Cytoscape: calculate optimal positions
104 Cytoscape-->>Renderer: return positioned graph
105 deactivate Cytoscape
106
107 %% SVG Generation
108 Renderer->>SVGDraw: drawNodes(db, svg, mindmap, section, conf)
109 activate SVGDraw
110
111 loop For each node recursively
112 SVGDraw->>SVGDraw: select shape function
113
114 alt Default Shape
115 SVGDraw->>SVGDraw: defaultBkg() - rounded rectangle
116 else Rectangle Shape
117 SVGDraw->>SVGDraw: rectBkg() - sharp corners
118 else Circle Shape
119 SVGDraw->>SVGDraw: circleBkg() - perfect circle
120 else Cloud Shape
121 SVGDraw->>SVGDraw: cloudBkg() - organic curves
122 else Bang Shape
123 SVGDraw->>SVGDraw: bangBkg() - explosion style
124 else Hexagon Shape
125 SVGDraw->>SVGDraw: hexagonBkg() - six sides
126 end
127
128 SVGDraw->>SVGDraw: create SVG elements
129 SVGDraw->>SVGDraw: add text labels
130 SVGDraw->>SVGDraw: position node
131
132 opt Node has children
133 SVGDraw->>SVGDraw: drawNodes() recursive call
134 end
135 end
136 deactivate SVGDraw
137
138 %% Edge Rendering
139 Renderer->>Renderer: drawEdges(edgesEl, cy)
140 loop For each edge
141 Renderer->>Renderer: extract edge bounds
142 Renderer->>Renderer: draw SVG path
143 end
144
145 %% Styling Application
146 Renderer->>Styles: getStyles(options)
147 activate Styles
148
149 Styles->>Styles: genSections(options)
150 loop For THEME_COLOR_LIMIT sections
151 Styles->>Styles: generate color scale
152 Styles->>Styles: create CSS rules
153 Note right of Styles: .section-X fills<br/>.edge-depth-X widths<br/>.node-icon-X colors
154 end
155
156 Styles->>Styles: apply theme integration
157 Styles-->>Renderer: return compiled CSS
158 deactivate Styles
159
160 %% Final Assembly
161 Renderer->>Output: selectSvgElement()
162 Renderer->>Output: setupGraphViewbox()
163 Renderer->>Output: apply styles
164 Renderer->>Output: add interactive elements
165 deactivate Renderer
166
167 activate Output
168 Note over Output: Final Mindmap Features
169 Output->>Output: responsive layout
170 Output->>Output: accessibility attributes
171 Output->>Output: hover effects
172 Output->>Output: click handling
173 Output-->>User: rendered mindmap
174 deactivate Output
175
176 %% Configuration Details
177 Note over DB, Styles: Configuration Options
178 Note right of DB: Padding Calculations:<br/>Base padding from config<br/>RECT: ×2 padding<br/>ROUNDED_RECT: ×2 padding<br/>HEXAGON: ×2 padding
179 Note right of Styles: Section Management:<br/>MAX_SECTIONS = 12<br/>Dynamic color generation<br/>Git theme integration
180 Note right of Renderer: Layout Parameters:<br/>Cytoscape configuration<br/>coseBilkent settings<br/>Node spacing rules