markdown 流程图绘制库， typora内置支持该markdown代码块功能

在线编辑器

功能

代码块为mermaid, 比如

FlowChart - 流程图

Sequence Diagram - 时序图

Class Diagram - 类图

State Diagrams - 状态图

User Journey Diagrams - 用户旅程图

Pie Chart Diagrams - 饼图

目前支持12种颜色, 超出12种类型则颜色会从第一个颜色进行循环
因为源码颜色定义为pie1 ~ pie12

Gantt Diagrams - 甘特图

Requirement Diagrams - 需求图

配置

我们可以通过配置mermaid.initialize(config)方法中的config来配置全局图表的样式

你可以在这里找到全部的配置项 -> Mermaid官网 - 全部配置项

你也可以使用Mermaid在线编辑器进行配置项测试

theme

主题, 可选值为

• default
  
• forest
  
• dark
  
• neutral
  
• base
  
• null
  禁用所有预设主题

源码分析

Theme

Mermaid使用scss作为样式预处理器, 使用khroma作为颜色计算工具

src/themes文件夹下放置了主题定义文件
目前预设的主题有5种

• default: 默认
• base: 基础
• dark: 暗黑
• forest: 雨林
• neutral: 中性(灰不拉几的)

每一个主题都有一个对应的js文件theme-xxx, 主题文件内基本就是大批量的颜色定义, 非常容易理解

初始化 (initialize)

方法位于src/mermaidAPI.js, 接收一个options参数