MarkdownPad 2绘制流程图(配置教程)

(转载,有所改动)
markdownpad是个人觉得是一款非常好用的markdown语法编辑器，但是有个缺点就是不支持流程图的绘制，现在流行的一般是flowchart.js这个流程图插件，可以在head中使用对应的设置让Markdownpad对流程图进行支持

• 首先配置markdown处理器为下图：
  

• 然后进入markdownpad2》高级》工具》选项》高级》HTMLHead编辑器
  

• 将如下代码粘贴进去

<script src="https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/flowchart/1.11.0/flowchart.js"></script>
<script>
        window.onload = function () {
            var ht = $('.lang-flow').html();
            $('.lang-flow').replaceWith('<textarea class="lang-flow">' + ht + '</textarea>');
            $('.lang-flow').parent().hide();
            /*
             * 追加canvas
             * */
            $('.lang-flow').parent().after('<div id="canvas"></div>');
            /*
             * 渲染
             * */
            var cd = document.getElementsByClassName("lang-flow"), chart;
            (cd.change = function () {
                var code = cd[0].value;
                if (chart) {
                    chart.clean();
                }
                chart = flowchart.parse(code);
                chart.drawSVG('canvas', {
//                     'x': 30,
//                     'y': 50,
                        'line-width': 3,
                        'maxWidth': 3,//ensures the flowcharts fits within a certian width
                        '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': {
                                'font-color': 'red',
                                'element-color': 'green',
                                'fill': 'yellow'
                            },
                            'end': {
                                'class': 'end-element'
                            }
                        },
                        'flowstate': {
                            'past': {'fill': '#CCCCCC', 'font-size': 12},
                            'current': {'fill': 'yellow', 'font-color': 'red', 'font-weight': 'bold'},
                            'future': {'fill': '#FFFF99'},
                            'request': {'fill': 'blue'},
                            'invalid': {'fill': '#444444'},
                            'approved': {'fill': '#58C4A3', 'font-size': 12, 'yes-text': 'APPROVED', 'no-text': 'n/a'},
                            'rejected': {'fill': '#C45879', 'font-size': 12, 'yes-text': 'n/a', 'no-text': 'REJECTED'}
                        }
                    }
                );
            })();
        };
    </script>

- 以下为测试代码

```flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something…|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```测试代码

测试时删掉末尾的”测试代码”