markdown 中如何完美的嵌入 mermaid

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3247 天前的主题，其中的信息可能已经有所发展或是发生改变。

现在习惯 markdown 写写笔记, 用 hexo 发布. 最近发现mermaid能很好地画各种流程图, 所以想在 markdown 中嵌入. 然后支持在hexo中转化, 如果同时能支持vim及时预览更好.

例如


```mermaid

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

\```

github 上没看到很好的方案. 请问有人实现过么

9 条回复 • 2018-02-07 15:41:53 +08:00

yech1990

2016-01-03 14:58:23 +08:00 via Android

😛

feather12315

2016-01-03 16:40:31 +08:00 via Android

楼主找得到话分享下。。
想使用 markdown 记录点东西，但是流程图啥的是个问题

yech1990

2016-01-03 20:26:34 +08:00 via Android

@feather12315 请参考 mermaid 的主页，上面有很多案例

比如我想记录一下怎么用 Python 做基因组数据比对，其中涉及到太多步骤，如果用文字很难描述得清楚。这时候如果有流程图就不错。
同时还可以用 gantt 图写计划。

yech1990

2016-01-03 20:28:15 +08:00 via Android

找到一个可以自己实现的思路，用 nw.js 不过对我来说难度太大
benq.im/2015/04/21/hexomd-01/

clijiac

2016-01-03 20:35:32 +08:00

stackedit.貌似支持这个.你可以看看有没有 code 参考

yech1990

2016-01-03 20:43:45 +08:00 via Android

@clijiac 我找到问题的思路了。
现在要做的事情是扩展， markdown 的语法。可能有些编辑器能支持，不过还是无法和我的需求对接。这里的需求是 hexo 和 vim 。它们都依赖于 marked 或是 markdown-it 插件, 我这里要做的是 folk 一份 marked 插件，更改正则语法就行了

benq.im/2015/05/19/hexomd-07/

Livid

MOD

2016-10-17 08:19:17 +08:00

Gitbook 有一个 Mermaid 插件

https://www.npmjs.com/package/gitbook-plugin-mermaid

vagranth

2017-11-02 16:02:26 +08:00

不知道还有人关心这个问题吗？
我用 hexo 和 next 主题，解决办法是：
1.在 hexo 里面用 npm 或 yarn 安装 hexo-tag-mermaid
2.把 mermaid 加到 next 的 source/lib 目录下（可选）
3.在 next 的 layout/_partials/head/custom-head.swig 中增加下面三句（用 CDN 的话改掉）
<link href="{{ url_for(theme.vendors._internal + '/mermaid/mermaid.css') }}" rel="stylesheet">
<script src="{{ url_for(theme.vendors._internal + '/mermaid/mermaid.min.js') }}"></script>
<script type="text/javascript">mermaid.initialize({startOnLoad:true});</script>
4.md 里面直接写{% mermaid %}mermaid 代码{% endmermaid %}

tytto

2018-02-07 15:41:53 +08:00

@vagranth 谢谢分享！这两天正在研究这个，照以上步骤做了但是没有成功。

我把 hexo-tag-mermaid 文件夹加到了 next 的 source/lib 下，然后在编辑了 next 的 layout/_partials/head/custom-head.swig：

{#
<link href="{{ url_for(theme.vendors._internal + '/mermaid/mermaid.css') }}" rel="stylesheet">
<script src="{{ url_for(theme.vendors._internal + '/mermaid/mermaid.min.js') }}"></script>
<script type="text/javascript">mermaid.initialize({startOnLoad:true});</script>
#}

在 md 里面直接写{% mermaid %}代码{% endmermaid %}然后 hexo g 的时候说有错误。

不知道是我哪一步出错了呢？本人太小白啦，麻烦指导一下。