1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > NeetCode Agent Evolved Mindmap (EN) - NeetCode Mind Maps</ title >
7+ < style >
8+ * { margin : 0 ; padding : 0 ; box-sizing : border-box; }
9+ html , body { height : 100% ; }
10+ .markmap { width : 100% ; height : 100% ; }
11+ .markmap > svg { width : 100% ; height : 100% ; }
12+ # topbar {
13+ position : fixed; top : 0 ; left : 0 ; right : 0 ; z-index : 100 ;
14+ background : # fff ; border-bottom : 1px solid # e5e7eb ;
15+ padding : 8px 16px ; display : flex; gap : 8px ;
16+ font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI' , sans-serif;
17+ font-size : 13px ;
18+ }
19+ # topbar button {
20+ padding : 4px 12px ; border : 1px solid # d1d5db ;
21+ border-radius : 4px ; background : # fff ; cursor : pointer;
22+ }
23+ # topbar button : hover { background : # f3f4f6 ; }
24+ .markmap { margin-top : 40px ; height : calc (100% - 40px ); }
25+ </ style >
26+ < script src ="https://cdn.jsdelivr.net/npm/d3@7 "> </ script >
27+ < script src ="https://cdn.jsdelivr.net/npm/markmap-view "> </ script >
28+ < script src ="https://cdn.jsdelivr.net/npm/markmap-lib "> </ script >
29+ < script src ="https://cdn.jsdelivr.net/npm/markmap-toolbar "> </ script >
30+ < script >
31+ function fitView ( ) {
32+ var svg = document . querySelector ( '.markmap > svg' ) ;
33+ if ( svg && svg . mm ) svg . mm . fit ( ) ;
34+ }
35+ function expandAll ( ) {
36+ var svg = document . querySelector ( '.markmap > svg' ) ;
37+ if ( svg && svg . mm ) {
38+ var root = svg . mm . state . data ;
39+ ( function expand ( n ) {
40+ n . payload = Object . assign ( { } , n . payload , { fold : 0 } ) ;
41+ if ( n . children ) n . children . forEach ( expand ) ;
42+ } ) ( root ) ;
43+ svg . mm . setData ( root ) ; svg . mm . fit ( ) ;
44+ }
45+ }
46+ function collapseAll ( ) {
47+ var svg = document . querySelector ( '.markmap > svg' ) ;
48+ if ( svg && svg . mm ) {
49+ var root = svg . mm . state . data ;
50+ root . children && root . children . forEach ( function collapse ( n ) {
51+ if ( n . children && n . children . length ) {
52+ n . payload = Object . assign ( { } , n . payload , { fold : 1 } ) ;
53+ n . children . forEach ( collapse ) ;
54+ }
55+ } ) ;
56+ svg . mm . setData ( root ) ; svg . mm . fit ( ) ;
57+ }
58+ }
59+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
60+ const { Transformer, Markmap } = window . markmap ;
61+ const transformer = new Transformer ( ) ;
62+ const markdown = `` ;
63+ const { root } = transformer . transform ( markdown ) ;
64+ const svg = d3 . select ( '.markmap' ) . append ( 'svg' ) ;
65+ const mm = Markmap . create ( svg . node ( ) , { color : ( node ) => node . payload ?. color || '#f59e0b' } , root ) ;
66+ svg . node ( ) . mm = mm ;
67+ if ( window . markmap && window . markmap . Toolbar ) {
68+ const toolbar = new window . markmap . Toolbar ( ) ;
69+ toolbar . attach ( mm ) ;
70+ setTimeout ( function ( ) {
71+ document . querySelectorAll ( '.mm-toolbar' ) . forEach ( function ( toolbar ) {
72+ toolbar . querySelectorAll ( '.mm-toolbar-item' ) . forEach ( function ( item ) {
73+ if ( ( item . title || '' ) . toLowerCase ( ) . includes ( 'dark' ) ) item . remove ( ) ;
74+ } ) ;
75+ var brand = toolbar . querySelector ( '.mm-toolbar-brand' ) ;
76+ if ( brand ) {
77+ brand . innerHTML = '🟡 NeetCode' ;
78+ brand . href = '#' ; brand . onclick = function ( e ) { e . preventDefault ( ) ; } ;
79+ brand . style . fontSize = '12px' ; brand . style . color = '#666' ;
80+ }
81+ } ) ;
82+ } , 200 ) ;
83+ }
84+ } ) ;
85+ </ script >
86+ </ head >
87+ < body >
88+ < div id ="topbar ">
89+ < button onclick ="fitView() "> Fit View</ button >
90+ < button onclick ="expandAll() "> Expand All</ button >
91+ < button onclick ="collapseAll() "> Collapse All</ button >
92+ </ div >
93+ < div class ="markmap "> </ div >
94+ </ body >
95+ </ html >
0 commit comments