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
  8. st->op->in->cond
  9. cond(yes)->e
  10. cond(no)->op1->op
  11. ```

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里面的参数。