在typroa软件中，我们可以通过flow插入flowchart流程图。但是对于docsify并不识别。此时，就需要我们对已有的docsify项目进行一些简单的改造，从而实现此功能。

1 flowchart简介

1.1 节点介绍

开始
用作流开始的第一个节点。默认是start
```
st=>start: start
```
结束
用作流结束的最后一个节点。默认是end
```
e=>end: end
```
操作
表示需要在流中进行的操作。
```
op1=>operation: operation
```
输入输出
表示在流中发生的输入和输出。
```
io=>inputoutput: IO
```
子程序
表示在流程中发生的子程序，并且应该由另一个流程图来记录该子程序。
```
sub1=>subroutine: subroutine
```
判断
允许条件或逻辑语句让流引导到两个路径之一
```
cond=>condition: condition
```
并行
允许同时发生多个流程
```
para=>parallel: parallel
```

1.2 连接语法

<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]
节点名称[(特殊说明符1[,特殊说明符2])]->节点名称[(特殊说明符1[,特殊说明符2])]->节点名称

特殊属性的位置属性：有四个位置可以选择：top,bottom,left,right，是指出发节点的框的四个位置。

2 docsify 改造

docsify改造主要是修改根目录下的index.html文件。

2.1 插件引入

flowchat

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>

2.2 渲染节点编写

var flownow = 0;
var canvasnow = 0;
function renderFlow(){for(var i = 0;i<flownow;i++){debugger;var cd = document.getElementById("flow_code_"+i),chart;var code = cd.value;chart = flowchart.parse(code);chart.drawSVG('canvas'+i, {// 'x': 30,// 'y': 50,'line-width': 3,'maxWidth': 3,'line-length': 50,'text-margin': 10,'font-size': 14,'font': 'normal','font-family': 'Helvetica','font-weight': 'normal','font-color': 'black','line-color': 'black','element-color': 'black','fill': 'white','yes-text': 'yes','no-text': 'no','arrow-end': 'block','scale': 1,'symbols': {'start': {'class': 'start-element'},'end':{'class': 'end-element'}}});}
}

这里定义了两个全局变量flownow与canvasnow

2.3 增加flow的识别

为了和typora兼容，这里可以识别如下的形式：

```flow
```

所以需要增加对于flow的语法识别，在window.$docsify->markdown->code中加入，具体代码如下：

window.$docsify = {markdown:{renderer:{code: function(code, lang) {if (lang === "flow") {return ('<div><textarea id="flow_code_'+(flownow++)+'" style="width: 100%;display:none;" rows="11"  >' + code + "</textarea></div><div id='canvas"+(canvasnow++)+"'></div>");}return this.origin.code.apply(this, arguments);   }}}
}

2.4 编写插件

编写插件，实现flowchart的渲染

window.$docsify = {plugins: [function(hook, vm) {hook.beforeEach(function(content) {flownow = 0canvasnow = 0return content;});hook.doneEach(function() {renderFlow()});}]
}

docsify配置flowchart模块相关推荐

Spartan-6系列内部模块介绍之可配置逻辑模块（CLB）
可配置逻辑模块(CLB) Spartan-6每个CLB模块里包含两个SLICE.CLB通过交换矩阵和外部通用逻辑阵列相连,如图2-1和图2-2所示.底部的SLICE标号为SLICE0,顶部的SLICE ...
Maven最佳实践划分模块配置多模块项目 pom modules
所有用Maven管理的真实的项目都应该是分模块的,每个模块都对应着一个pom.xml.它们之间通过继承和聚合(也称作多模块,multi-module)相互关联.那么,为什么要这么做呢?我们明明在开发一 ...
【AWSL】之Linux源代码编译及配置yum源（tar 解包、./configure配置软件模块、make）
源代码编译序言一.源代码概述 1.使用源代码安装软件的优点 2.应用场合举例 3.安装源代码软件为什么使用编译安装二.编译安装的基本思路三.配置本地yum源仓库四.`yum常用命令` 五.` ...
IntelliJ IDEA for Mac 如何配置项目模块的源代码根目录_源码文件的根目录
按下组合键 Command + ; 打开[项目结构]配置窗口:然后选择左侧菜单栏的[Modules]:然后在右侧的模块列表中,选择你要配置的模块:接着选择右侧界面中的[Sources]标签. 首先添加 ...
井电双控智能缴费管理系统、水井管理、报警管理、费用管理、实时查询、信息配置、模块配置、智能报表、水表、抄表、井电、电表、用水分析、水电、灌溉用水、绿化用水、农业用水、智慧水电、水利
井电双控智能缴费管理系统.水井管理.报警管理.费用管理.实时查询.信息配置.模块配置.智能报表.水表.抄表.井电.电表.用水分析.水电.灌溉用水.绿化用水.农业用水.智慧水电.水利 Axure原型演示 ...
iMX6UL配置MCP2515模块（SPI转CAN）——基于迅为iTOP-iMX6UL开发板
写在前面在文章"嵌入式Linux的CAN总线配置--基于迅为iTOP-4412开发板"中我给4412开发板配置了SPI转CAN模块,使用的是不带设备树的内核.在本篇文章中,要 ...
9012年都过了，还不会用go modules配置本地模块同学真要死了！
目录 1. go 1.16引发的血案 2. 在go modules中配置本地模块 3. 让goland支持go modules模式视频版在本文的最后 1. go 1.16引发的血案一直在用go语言 ...
GameFramework框架详解之 DataTable配置表模块
一.前言: GameFramework的DataTable模块是项目的配置表模块,存储着项目的静态配置数据.配置表一般是从excel导出csv/json/xml格式的,之所以是excel作为源文件,原 ...
SSM整合的配置+功能模块+测试
SSM整合的配置+功能模块+测试一. 配置准备 1.1 module结构 1.2 pom.xml 1.3 resources 1.3.1 jdbc.properties: 1.4 config 1. ...

docsify配置flowchart模块