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