统计图表如何开发实现的（Typora输入代码块数学公式）

Typora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本，目前完全免费。

https://typora.io/#

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

在使用Dreamweaver编写网页时，遇到需要插入代码块、流程图、数学公式时，总是显得很无力，效率很低，效果不好，使用Typora会让这些问题迎刃而解，且轻便，简单。

直接看一个demo：

统计图表如何开发实现的（Typora输入代码块数学公式）(1)

导出为html:

统计图表如何开发实现的（Typora输入代码块数学公式）(2)

html网页源代码：

统计图表如何开发实现的（Typora输入代码块数学公式）(3)

其可以导出的格式有：

统计图表如何开发实现的（Typora输入代码块数学公式）(4)

流程图样式包括：

1、标准流程图源码格式（横向）：

```flow st=>start: 开始框 op=>operation: 处理框 cond=>condition: 判断框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 输入输出框 e=>end: 结束框 st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op ```

统计图表如何开发实现的（Typora输入代码块数学公式）(5)

2 mermaid语言库绘流程图

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码，因此安全许多。

官网：https://mermaidjs.github.io/Github 项目地址：https://github.com/knsv/mermaid

2.1 横向流程图源码格式：

graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2]

统计图表如何开发实现的（Typora输入代码块数学公式）(6)

2.2 竖向流程图源码格式：

sequenceDiagram Title: 标题：复杂使用对象A->对象B: 对象B你好吗?（请求） Note right of 对象B: 对象B的描述 Note left of 对象A: 对象A的描述(提示) 对象B-->对象A: 我很好(响应) 对象B->小三: 你好吗小三-->>对象A: 对象B找我了对象A->对象B: 你真的好吗？ Note over 小三,对象B: 我们是朋友 participant C Note right of C: 没人陪我玩

统计图表如何开发实现的（Typora输入代码块数学公式）(7)

2.3 时序图源码复杂样例

gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发学习准备理解需求 :crit, done, 2014-01-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h

统计图表如何开发实现的（Typora输入代码块数学公式）(8)