在editor.md编辑器中，内置的流程图是基于flowchart.js语法的。
要使用流程图得先在setting中先开启，

  1. {
  2.     flowChart : true
  3. }

1. 效果演示

先看一个简单的流程图效果，列举几个常见的流程图元素

Created with Raphaël 2.1.2起始框执行框1(点我)数据框判断框终止框执行框2yesno

使用流程图语法的话只用下面几行代码就可以达到效果

  1. ```flow
  2. st=>start: 起始框|current
  3. op=>operation: 执行框1(点我)|approved:>https://www.codehui.net[blank]
  4. op1=>operation: 执行框2|
  5. in=>inputoutput: 数据框
  6. cond=>condition: 判断框
  7. e=>end: 终止框|past
  9. st->op->in->cond
  10. cond(yes)->e
  11. cond(no)->op1->op
  12. ```

2. 语法解析

流程图语法详细可参考 flowchart.js

从上面的代码中我们可以看到流程图大致分为两部分,元素定义和元素连接，使用过flowchart.js可能知道还有其他部分，但是试了一下这里面貌似不支持。就先列出来几个常用的元素。

  1. start       流程图开始
  2. end         流程图终止
  3. operation   操作流程
  4. inputoutput 数据
  5. subroutine  子操作流程
  6. condition   条件判断

元素的定义方法，注意type:和content之间必须有个空格。

  1. tag=>type: ``   普通元素
  2. tag=>type: content:>url   元素添加点击链接
  3. tag=>type: content:>url[target]   元素链接添加target属性
  4. tag=>type: content|flowstate  流程图元素flowstate

元素连接

元素连接使用->，比如st->e就是在开始和终止之间连上一条箭头

Created with Raphaël 2.1.2开始结束

条件判断 cond 的的用法











语法效果
 


  1.                     
    st=>start: 开始
    in=>inputoutput: 输入一个数x
    cond=>condition: x > 10 ?
    e=>end: 结束

    st->in->cond
    cond(yes)->e
    cond(no, right)->in


代码汇

流程图样式的修改

流程图默认的样式可能会满足不了我们的需求，幸好提供了flowstate可以让我们自己设置。就譬如标签的class属性。
在editor.md中，需在文件/lib/jquery.flowchart.min.js中进行修改。

  1. 'flowstate' : {
  2.     'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
  3.     'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
  4.     'future' : { 'fill' : '#FFFF99'},
  5.     'request' : { 'fill' : 'blue'},
  6.     'invalid': {'fill' : '#444444'},
  7.     'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
  8.     'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
  9. }

可以看到，已经提供了几个默认的方法，就如本文开始中用到的。这里介绍一下自带的几个属性，其他基础css基本都认识。

  1. fill 背景颜色
  2. yes-text 判断元素正确时的文字，默认yes，
  3. no-text  判断元素错误时的文字，默认no，

当然了我们可以继续在里面添加自定义方法，修改美观的样式，使用方法就是在元素后面跟上|past就可以了。如果要设置其他默认属性可以修改defaults里面的参数。