富文本代码图表 v1.0.0
初版发布
2024-08-10 更新日志
  • 初版发布
富文本代码图表

富文本图表

基于 https://mermaid.live 的图表插件,支持流程图、序列图、甘特图、类图、状态图、ER图等。

实时预览可直接访问 https://mermaid.live

使用原理

RichContentMermaid 会自动识别页面上 <pre> 标签,如果这两个标签包含了形如 class="language-mind" 的属性,那么 RichContentMermaid 就会自动将这两个标签所包含的代码转换为图表显示。

自动识别的代码格式

<code class="language-mermaid">
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
</code>

图表样例

Flow

Get money
One
Two
Three
Christmas
Go shopping
Let me think
Laptop
iPhone
Car

Sequence

JohnAliceJohnAliceHello 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

CUSTOMERORDERLINE-ITEMDELIVERY-ADDRESSplacescontainsuses

Gantt

2020-01-052020-01-122020-01-192020-01-262020-02-022020-02-092020-02-162020-02-232020-03-012020-03-082020-03-15A task           Another task     Task in sec      another task      SectionAnotherA Gantt Diagram

User Journey

CatMe
Go to work
Go to work
Me
Make tea
Make tea
Me
Go upstairs
Go upstairs
MeCat
Do work
Do work
Go home
Go home
Me
Go downstairs
Go downstairs
Me
Sit down
Sit down
My working day

Pie

46%40%9%5%Key elements in Product XPotassiumCalciumMagnesiumIron

Mindmap

mindmapOriginsLong history
PopularisationBritish popularpsychology author TonyBuzanResearchOn effectivnessand featuresOn Automatic creationUsesCreative techniquesStrategic planningArgument mappingToolsPen and paperMermaid

QuadrantChart

We should expandNeed to promoteRe-evaluateMay be improvedCampaign FCampaign ECampaign DCampaign CCampaign BCampaign ALow ReachHigh ReachLow EngagementHigh EngagementReach and engagement of campaigns

XYChart

Sales Revenuejanfebmaraprmayjunjulaugsepoctnovdec110001050010000950090008500800075007000650060005500500045004000Revenue (in $)

Block

Document
left
A wide one in the middle
right
DB
D
C
QQ
微信
客服

.