「Mermaid」

认识

Mermaid 是一款基于文本的流程图、时序图和甘特图绘图工具,使用简单,可以在 Markdown 中直接绘制图形。Mermaid 可以帮助用户轻松地绘制各种类型的流程图和时序图,包括基本的流程图、序列图、甘特图和类图等。

Mermaid 的绘图语法简单易学,只需要通过简单的文本描述即可创建复杂的流程图和时序图。Mermaid 支持多种输出格式,包括 SVG、PNG、PDF 和 HTML 等,用户可以根据需要选择不同的输出格式。同时,Mermaid 还支持在网页中实时渲染图形,用户可以在网页上直接编辑和查看图形。

Mermaid 是一款开源软件,由 JavaScript 编写,可以在多种平台上运行,包括 Windows、Mac 和 Linux 等。Mermaid 还支持多种编辑器,并且可以与 GitHub 和 GitLab 等代码托管平台无缝集成,方便用户分享和管理绘图内容。

构建

Mermaid Cli on Debian

mermaid-js/mermaid-cli: Command line tool for the Mermaid library
Error: Failed to launch Chrome · Issue #39 · mermaidjs/mermaid.cli

我们安装 mermaid-cli 版本,用于与 Zim 集成:

// NPM 环境信息

# nvm ls
->     v13.14.0
default -> v13.14.0
node -> stable (-> v13.14.0) (default)
stable -> 13.14 (-> v13.14.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.22.1 (-> N/A)
lts/erbium -> v12.19.0 (-> N/A)

// 执行安装命令

# npm install @mermaid-js/mermaid-cli

在线编辑工具

针对在线编辑与在线预览:

应用

如何设置图片大小?

Generated PDF width/height · Issue #35 · mermaidjs/mermaid.cli

只能通过 CSS 或者 命令行参数的形式指定图片大小,也就是说无法在语言中定义图片大小。

参考

针对入门学习,参考文档:

针对深入学习,参考文档: