让markdownpad2支持flowchart流程图

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

首先配置markdown处理器为下图：
![markdownpad2处理器配置.png](https://cos.cc430.cn/2017/09/02/1504360436.png)

然后进入markdownpad2》高级》工具》选项》高级》HTMLHead编辑器
![截图](https://cos.cc430.cn/2017/04/16/822067265.png)
将如下代码粘贴进去
```javascript
    <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>
```
![](https://cos.cc430.cn/2017/04/16/1908545048.png)
在mardownpad2中输入如下代码进行测试
\`\`\`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
\`\`\`
不支持同步预览
可使用F6在浏览器中进行预览
![可使用F6进行预览](https://cos.cc430.cn/2017/04/16/3327236878.png)

需要说明的是在一个文档中暂时只支持一个流程图，好像也只能这样了。
![](https://cos.cc430.cn/2017/04/16/4066688213.png)
**未经许可禁止转载**

让markdownpad2支持flowchart流程图

添加新评论

最新文章

最新回复

标签

归档

友情链接