jekyll在博客添加流程图

2021-06-28 12:01:29 阅读：163 来源： 互联网

标签：ldata end 流程图 text 博客 st jekyll font fill

title	author	date	CreateTime	categories
jekyll 在博客添加流程图	lindexi	2019-08-31 16:55:59 +0800	2018-2-13 17:23:3 +0800	jekyll

本文告诉大家如何在博客使用流程图。

如果你使用的是我博客的模板，那么就可以直接使用我说的文件，如果是自己的主题，就需要在自己文件对应的地方加上代码。

在我的博客里，需要添加下面的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>

<textarea class="flowcode"> st=>start: Start e=>end ldata=>operation: 进入csdn st->ldata->e </textarea>

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 </textarea>

标签：ldata,end,流程图,text,博客,st,jekyll,font,fill
来源： https://blog.51cto.com/u_11283245/2950685

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jekyll在博客添加流程图