zoukankan      html  css  js  c++  java
  • 2019-8-31-jekyll-在博客添加流程图

    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>
     
    

    必须删除空格才可以使用代码

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

  • 相关阅读:
    Atitti 图像处理 图像混合 图像叠加 blend 原理与实现
    Atitit Gaussian Blur 高斯模糊 的原理and实现and 用途
    Atitit 图像处理 灰度图片 灰度化的原理与实现
    Atitit (Sketch Filter)素描滤镜的实现  图像处理  attilax总结
    Atitit 实现java的linq 以及与stream api的比较
    Atitit attilax在自然语言处理领域的成果
    Atitit 图像处理 常用8大滤镜效果 Jhlabs 图像处理类库 java常用图像处理类库
    Atitit 图像处理--图像分类 模式识别 肤色检测识别原理 与attilax的实践总结
    Atitit apache 和guava的反射工具
    atitit。企业的价值观 员工第一 vs 客户第一.docx
  • 原文地址:https://www.cnblogs.com/lindexi/p/12086202.html
Copyright © 2011-2022 走看看