Docsify支持Markdown多种流程图

墨蓝 2023-01-11 03:44 270阅读 0赞

### 文章目录 ###

*   *  目标
     *  docsify
     *   *  Markdown 文档
         *  支持 mermaid
         *  支持 DOT 语言作图
         *  支持 LaTex 数学公式
         *  支持 Flow 流程图

## 目标 ##

*  实现docsify支持Markdown多种流程图
    
    参考：[使用 docsify 并定制以使它更强大][docsify]

## docsify ##

官方文档：https://docsify.js.org/\#/

docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 `.html` 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 `index.html` 就可以开始编写文档并直接[部署在 GitHub Pages][GitHub Pages]。

### Markdown 文档 ###

一般语法docsify 都是支持的，但是**对于Markdown 需要支持流程图需要加入配置才能生效**，修改index.html 进行配置。

### 支持 mermaid ###

官方文档：https://docsify.js.org/\#/zh-cn/markdown?id=%e6%94%af%e6%8c%81-mermaid

这个是官方上配置的，可以发现很简单。

引入支持mermaid 的css 和 js。并配置js代码。js代码的逻辑也很简单，判断语法格式是 mermaid ，就把 code （代码）使用 mermaid 的js 执行以下，拼装一个 div 加入当前页。

// Import mermaid
    // <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
    // <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
     
    var num = 0;
    mermaid.initialize({  startOnLoad: false });
     
    window.$docsify = { 
      markdown: { 
        renderer: { 
          code: function(code, lang) { 
              // 判断语言是否为 mermaid
            if (lang === "mermaid") { 
                // 将div 返回
              return (
                '<div class="mermaid">' + mermaid.render('mermaid-svg-' + num++, code) + "</div>"
              );
            }
            return this.origin.code.apply(this, arguments);
          }
        }
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70]

### 支持 DOT 语言作图 ###

参考：https://ld246.com/article/1553507125889

仿照官方文档对 mermaid 的支持，进行配置

### 支持 LaTex 数学公式 ###

### 支持 Flow 流程图 ###

https://github.com/adrai/flowchart.js官方地址

参考 flowchart 的例子：https://github.com/adrai/flowchart.js/blob/master/example/index.html 实现加入 flow 的语法支持

具体可以代码参考：https://github.com/gengzi/Code-animal/blob/master/index.html

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70 1]

> 听说点赞关注的人，身体健康，一夜暴富，升职加薪迎娶白富美!!!
> 
> [点我领取每日福利][Link 1]  
> 微信公众号：**耿子blog**  
> GitHub地址：**[gengzi][]**  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70_pic_center]

[docsify]: https://ld246.com/article/1553507125889
[GitHub Pages]: https://docsify.js.org/#/zh-cn/deploy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70]: /images/20221119/f0deda17ff1e4be5a83ea098c95f9363.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70 1]: /images/20221119/f0e7a840a66745448be94e97dace533b.png
[Link 1]: https://gengzi.github.io/Code-animal/#/./docs/fuli/README
[gengzi]: https://github.com/gengzi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4ODE3NzM5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/747c475dfe96481a8ac7a1f0fc01dadf.png