富文本图表
基于 https://mermaid.live 的图表插件，支持流程图、序列图、甘特图、类图、状态图、ER图等。
实时预览可直接访问 https://mermaid.live 。
使用原理
RichContentMermaid 会自动识别页面上 <pre> 标签，如果这两个标签包含了形如 class="language-mind" 的属性，那么 RichContentMermaid 就会自动将这两个标签所包含的代码转换为图表显示。
自动识别的代码格式
图表样例
Flow
Get money
One
Two
Three
Christmas
Go shopping
Let me think
Laptop
iPhone
Sequence
John Alice John Alice Hello John, how are you? Great! Class
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
State
Still
Moving
Crash
ER
CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses Gantt
2020-01-05 2020-01-12 2020-01-19 2020-01-26 2020-02-02 2020-02-09 2020-02-16 2020-02-23 2020-03-01 2020-03-08 2020-03-15 A task Another task Task in sec another task Section Another A Gantt Diagram User Journey
Cat Me Go to work Me Make tea Me Go upstairs Me Cat Do work Go home Me Go downstairs Me Sit down My working day Pie
46% 40% 9% 5% Key elements in Product X Potassium Calcium Magnesium Iron Mindmap
mindmap Origins Long history
Popularisation British popular psychology author Tony Buzan Research On effectivness and features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper Mermaid QuadrantChart
We should expand Need to promote Re-evaluate May be improved Campaign F Campaign E Campaign D Campaign C Campaign B Campaign A Low Reach High Reach Low Engagement High Engagement Reach and engagement of campaigns XYChart
Sales Revenue jan feb mar apr may jun jul aug sep oct nov dec 11000 10500 10000 9500 9000 8500 8000 7500 7000 6500 6000 5500 5000 4500 4000 Revenue (in $) Block
Document
left
A wide one in the middle
right
DB
D
C
