Typora 是一款具备实时预览功能的 Markdown 编辑软件。这款编辑器覆盖了 OS X、Windows 以及 Linux 三个操作系统平台，并且值得注意的是，它目前是完全免费的。
https://typora.io/#
Markdown 是一种设计简洁的标记语言，其创始人是约翰·格鲁伯（John Gruber）。这种语言的设计初衷是让人们能够使用易于阅读和书写的纯文本格式来编写文档，随后这些文档可以被转换成规范的 XHTML（或者 HTML）格式。Markdown 语言借鉴了电子邮件中常用的纯文本标记方式。
得益于 Markdown 的轻便性、易读性和易写性，同时它也支持图片、图表以及数学公式的插入，因此现在许多网站都普遍采用 Markdown 来编写帮助文档或在论坛中发布信息。像 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等知名平台都使用了 Markdown，甚至它还可以用于撰写电子书。
当使用 Dreamweaver 来制作网页时，如果在插入代码块、流程图、数学公式等方面遇到困难，常常会感到力不从心，效率低下且效果不理想。而采用 Typora 进行编辑，则能够轻松解决这些问题，并且这款编辑器本身也相当轻巧和简单。
下面我们通过一个实例来直观了解：
导出为 html 格式:
生成的 html 网页源代码：
这款编辑器支持导出的格式包括：
流程图的样式展示：
1、标准流程图源代码格式（横向布局）：
2 mermaid 语言库用于绘制流程图
Mermaid 是一个专门用于绘制流程图、状态图、时序图、甘特图的开源库，它通过 JavaScript 在本地进行渲染，并且被广泛集成到许多 Markdown 编辑器中。
Mermaid 作为一种基于 JavaScript 渲染的库，它生成的并不是一个“图片”，而是一段 HTML 代码，因此从安全角度来看更为可靠。
官方网站：https://mermaidjs.github.io/Github 项目代码库：https://github.com/knsv/mermaid
2.1 横向流程图源代码格式：
2.2 竖向流程图源代码格式：
2.3 时序图源代码的复杂示例
2.4 甘特图的样例展示：
教学指南：
Markdown 高级技巧 | 菜鸟教程（使用 Typora 编辑器来讲解 Markdown 的语法规则）
https://www.runoob.com/markdown/md-advance.html
参考资料
1 Typora 的全面使用教程
https://sspai.com/post/54912/
2 如何选择合适的流程图绘制工具？-悟空问答
https://www.wukong.com/question/6809962012198568195/
3 Mermaid 的实用教学指南
https://blog.csdn.net/fenghuizhidao/article/details/79440583
－End－