CSDN(makedown流程图)_csdn系统程框图-CSDN博客

本文链接：https://blog.csdn.net/think_self/article/details/53710589

本文档总结了Markdown流程图的基本元素及其用法，包括开始、结束、条件判断、操作步骤等，并通过示例代码展示了如何利用flowchart.js生成流程图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

突然想对makedown的流程图学习，然后如下是我的总结：

流程图

然后总结是这几个：
1.start
2.end
3.condition
4.operation
4.subroutine
5.inputoutput

重复图中的注释：
1.每个框图只能有一个向下
2.一个框图往新的一个框图是只能向下和只能向右延伸
3.subroutine和inputoutput和operation有三种括号(right)(left)和默认向下的，但是一个框图只能取一种
4.start和end只能向下
5.condition条件框图yes是向下，no是向右<只有这俩个>
6.操作框代号，框图名称（英文）：+空格+名称（自取名字）如果不自取那么就是默认的代号，默认的款图名称
7.在csdn中，yes只是向下，而在其他可以其他方式。
8.以最后一条的指向为主，当前面有了指向，那么省掉前面的指向，只有后面的指向。

改：如下是去找方法的时候找到的最终指向的那个github源地址找到一个浏览器源代码：然后注意到复制到文档上，然后改后缀成HTML，出现上下二个框，然后我输入流程图的使用方式，看到下面出现图，我感觉真厉害，代码来实现流程图，很不错的！本地版流程图，只是没有导出功能，截图就可以了。好玩！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flowchart.js · Playground</title>
<style type="text/css">
.end-element { background-color : #FFCCFF; }
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.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>
<!-- <script src="../release/flowchart.min.js"></script> -->
<script>
window.onload = function () {
var btn = document.getElementById("run"),
cd = document.getElementById("code"),
chart;
(btn.onclick = function () {
var code = cd.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' }
}
});
$('[id^=sub1]').click(function(){
alert('info here');
});
})();
};
</script>
</head>
<body>
<div><textarea id="code" style="width: 100%;" rows="11">
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
</textarea></div>
<div><button id="run" type="button">Run</button></div>
<div id="canvas"></div>
</body>
</html>