美文网首页
用Markdownd的Mermaid插件画图表

用Markdownd的Mermaid插件画图表

作者: redexpress | 来源:发表于2019-01-05 13:16 被阅读14次

通常Markdown不能画图表,不过现在一些Markdown支持Mermaid图表,在Markdown中插入图表再不是难事了。

工具
我推荐的Markdown编辑器是Typora,这款软件支持多种图表,支持Windows,macOS,Linux三种操作系统,而且又很好用,特别是表格编辑功能很强大。你很难相信这么好用的软件竟然是免费的。

设置
Typora默认没有打开图表支持功能,你需要在偏好设置里面打开。

Typo偏好设置

使用
插入```mermaid 代码块开始图表。
下面代码

Mermaid

生成的图表是这样的:


Mermaid基础
关于Mermaid图表的知识请查阅https://mermaidjs.github.io/

相关文章

  • 用Markdownd的Mermaid插件画图表

    通常Markdown不能画图表,不过现在一些Markdown支持Mermaid图表,在Markdown中插入图表再...

  • 用代码画流程图和时序图快餐教程(2)

    用代码画流程图和时序图快餐教程(2) 可以嵌入在markdown代码中的mermaid mermaid的好处是可以...

  • 用 mermaid 画甘特图

    今天发现了一个比较好用的画甘特图/流程图的工具:mermaid,官方的介绍是: “Generation of di...

  • 如何在Markdown中画流程图

    如何在Markdown中画流程图呢?当然是用mermaid了,mermaid支持三种图形的绘制, 分别是流程图, ...

  • webpack技术内幕

    babel解析 webpack内部插件与钩子的解析 1. 自己写一个loader 来看markdownd的load...

  • Markdown Mermaid 实用教程

    Mermaid简介 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛...

  • 使用 Mermaid 语法创建图表

    Mermaid 是一种类似于 Markdown 的语法,您可以在其中使用文本来描述和自动生成图表。使用 Merma...

  • mermaid使用指南

    mermaid使用指南 Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,...

  • 安卓部分机型webview不显示echarts

    问题 项目用到echarts图表插件,用h5写好图表接入数据后,放入原生webview。测试ios可以正常渲染,安...

  • MarkDown 流程图示例

    后知后觉的我,最近才知道MarkDown支持mermaid语法,可以用MarkDown画流程图! 犹记得当初做毕业...

网友评论

      本文标题:用Markdownd的Mermaid插件画图表

      本文链接:https://www.haomeiwen.com/subject/visrrqtx.html