markdown 中如何完美的嵌入 mermaid

[yech1990]

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

例如

```mermaid

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

\```

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

[yech1990]

😛

[feather12315]

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

[yech1990]

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

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

[yech1990]

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

[clijiac]

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

[yech1990]

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




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

[Livid]

Gitbook 有一个 Mermaid 插件

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

[vagranth]

不知道还有人关心这个问题吗？
我用 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]

@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 的时候说有错误。

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