hexo next 主题对 Mermaid 图的支持测试

Mermaid 是一个基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。

流程图

流程图由节点(几何形状)和边(箭头或线条)组成。Mermaid 代码定义了如何制作节点和边,并适应不同的箭头类型、多方向箭头以及任何与子图的链接。

Text

One

Two

Hard

Round

Decision

Result 1

Result 2

流程图

时序图

时序图是一种交互图,显示进程如何彼此运行以及以什么顺序运行。

JohnAliceJohnAliceHello John, how are you?Great!See you later!时序图

类图

在软件工程中,统一建模语言(UML)中的类图是一种静态结构图,它通过显示系统的类、它们的属性、操作(或方法)以及对象之间的关系来描述系统的结构。

Animal

+int age

+String gender

+isMammal()

+mate()

Duck

+String beakColor

+swim()

+quack()

Fish

-int sizeInFeet

-canEat()

Zebra

+bool is_wild

+run()

From Duck till Zebra

can fly\ncan swim\ncan dive\ncan help in debugging

Animal example 类图

甘特图

01/06/201401/06/201401/07/201401/07/201401/08/201401/08/201401/09/201401/09/201401/10/2014Completed Active Parallel 1 Parallel 2 Parallel 3 Parallel 4 Section甘特图

数据包图

Source Port015Destination Port1631Sequence Number3263Acknowledgment Number6495Data Offset9699Reserved100105URG106ACK107PSH108RST109SYN110FIN111Window112127Checksum128143Urgent Pointer144159(Options and Padding)160191Data (variable length)192223Data (variable length)224255TCP Packet

看板图

Todo

In progress

Ready for deploy

Ready for test

Done

Can't reproduce

Create Documentation

Create Blog about the new diagram

Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.

Design grammar

knsv

Create parsing tests

MC-2038

K.Sveidqvist

last item

knsv

define getData

Title of diagram is more than 100 chars when user duplicates diagram with 100 char

MC-2036

Update DB function

MC-2037

knsv

Weird flickering in Firefox

架构图

DatabaseStorageStorageServerAPI

Git 图

maindevelop0-59d9c5c1-87e09182-5e89d6c3-0135d075-327f1d86-ae8a16dExample Git diagram

饼图

79%17%3%志愿者领养的宠物Rats

ER(实体关系)图

CUSTOMERDELIVERY-ADDRESSORDERhasplaces

参考

Mermaid 中文网