本文告訴大家如何在博客使用流程圖。
如果你使用的是我博客的模板,那麼就可以直接使用我說的文件,如果是自己的主題,就需要在自己文件對應的地方加上代碼。
在我的博客裏,需要添加下面的js到博客,可以打開 js.html 添加下面的代碼。如果是自己定義的主題,需要在博客可以訪問的地方添加下面的代碼
<script src="//cdn.bootcss.com/raphael/2.2.0/raphael-min.js"></script> <script src="//cdn.bootcss.com/flowchart/1.6.3/flowchart.js"></script> <script> function flow(name,f) { var chart = flowchart.parse(f); chart.drawSVG(name, { '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' } } }); } window.onload = function () { var cd = document.getElementsByClassName("flow"); for (var i = 0; i < cd.length; i++) { var t = cd[i].getElementsByClassName("flowcode")[0].value; var canvas = "canvas" + i; cd[i].innerHTML = "<div id=\"" + canvas + "\"></div>" flow(canvas, t); } } </script>
然後就可以在博客使用流程圖啦。
流程圖使用的使用需要先定義,然後使用->
表示連接
可以使用的定義有下面幾個
- start 開始
- end 結束
- operation 方法
- subroutine 子程序
- condition 條件
- inputoutput 輸入
使用流程圖和使用代碼一樣,需要使用<div class="flow">
放在一個地方,然後寫 flow
請看下面代碼
<div class="flow"> <textarea class="flowcode"> </textarea> </div>
例如寫一個簡單的流程,注意把前面的空格刪掉
<div class="flow"> <textarea class="flowcode"> st=>start: Start e=>end ldata=>operation: 進入csdn st->ldata->e </textarea> </div>
st=>start: Start e=>end ldata=>operation: 進入csdn st->ldata->e
condition
條件需要添加是否條件,例如下面的代碼
<div class="flow"> <textarea class="flowcode"> st=>start: Start e=>end ldata=>operation: 進入csdn c=>condition: 是否進入lindexi_gd l=>operation: 訪問 st->ldata->c c(yes)->l->e c(no)->e </textarea> </div>
必須刪除空格纔可以使用代碼
st=>start: Start e=>end ldata=>operation: 進入csdn c=>condition: 是否進入lindexi_gd l=>operation: 訪問 st->ldata->c c(yes)->l->e c(no)->e