mermaid

components/Mermaid.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import mermaid from 'mermaid'
+
+mermaid.initialize({
+  startOnLoad: true,
+  theme: 'default',
+  securityLevel: 'loose',
+  themeCSS: `
+    g.classGroup rect {
+      fill: #282a36;
+      stroke: #6272a4;
+    } 
+    g.classGroup text {
+      fill: #f8f8f2;
+    }
+    g.classGroup line {
+      stroke: #f8f8f2;
+      stroke-width: 0.5;
+    }
+    .classLabel .box {
+      stroke: #21222c;
+      stroke-width: 3;
+      fill: #21222c;
+      opacity: 1;
+    }
+    .classLabel .label {
+      fill: #f1fa8c;
+    }
+    .relation {
+      stroke: #ff79c6;
+      stroke-width: 1;
+    }
+    #compositionStart, #compositionEnd {
+      fill: #bd93f9;
+      stroke: #bd93f9;
+      stroke-width: 1;
+    }
+    #aggregationEnd, #aggregationStart {
+      fill: #21222c;
+      stroke: #50fa7b;
+      stroke-width: 1;
+    }
+    #dependencyStart, #dependencyEnd {
+      fill: #00bcd4;
+      stroke: #00bcd4;
+      stroke-width: 1;
+    } 
+    #extensionStart, #extensionEnd {
+      fill: #f8f8f2;
+      stroke: #f8f8f2;
+      stroke-width: 1;
+    }`,
+  fontFamily: 'Fira Code'
+})
+
+export default class Mermaid extends React.Component {
+  componentDidMount() {
+    mermaid.contentLoaded()
+  }
+
+  render() {
+    return <div className="mermaid">{this.props.chart}</div>
+  }
+}

components/NotionPage.js

@@ -41,6 +41,7 @@ import 'prismjs/components/prism-swift.js'
 import 'prismjs/components/prism-wasm.js'
 import 'prismjs/components/prism-yaml.js'
 import 'prismjs/components/prism-r.js'
+import Mermaid from './Mermaid'
 
 const Collection = dynamic(() =>
   import('react-notion-x/build/third-party/collection').then((m) => m.Collection), { ssr: true }
@@ -101,7 +102,10 @@ const NotionPage = ({ post }) => {
     addWatch4Dom()
   }, [])
 
+  const test = 'graph LR\nM{判断中位点<br>与旋转点的位置}--左侧元素小于中位点-->N[旋转点在中位点右侧 <br> 中位点左侧是有序序列]\nN-->O{目标值与<br>中位点的位置}\nO-- 最左侧元素 <= 目标 < 中位数-->B[目标值在中位点左侧 <br> right=mid]\nO-- 否则 -->D[目标值在中位点的右侧 <br> left=mid]\nM--左侧元素大于中位点-->E[旋转点在中位点左侧 <br> 中位点右侧是有序序列]\nE-->A{目标值与<br>中位点的位置}\nA--中位数 <= 查找目标 <= 最右侧元素-->F[目标值在中位点的右侧 <br> left=mid]\nA--否则-->G[目标值在中位点的左侧 <br> right=mid]\nM--左侧元素等于中位点 <br> 这种情况说明mid=0-->N\nM--右侧元素小于中位点-->N\nM--右侧元素大于中位点-->E\nM--右侧元素等于中位点 <br> 这种情况说明mid=-1-->E'
+
   return <div id='container' className='max-w-5xl overflow-x-hidden mx-auto'>
+    <Mermaid chart={test}/>
     <NotionRenderer
       recordMap={post.blockMap}
       mapPageUrl={mapPageUrl}