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>

2019-8-31-jekyll-在博客添加流程图的更多相关文章

  1. jekyll 在博客添加流程图

    本文告诉大家如何在博客使用流程图. 如果你使用的是我博客的模板,那么就可以直接使用我说的文件,如果是自己的主题,就需要在自己文件对应的地方加上代码. 在我的博客里,需要添加下面的js到博客,可以打开 ...

  2. 给Jekyll静态博客添加ScrollSpy博文大纲目录

    目录 内置TOC 添加ScrollSpy博文menu Scrollnav.js 使用方法❤ 最近又双叒把博客模板换成了Jekyll,Jekyll无论上手难度和修改难度都是目前所见流行模板中最低的(以无 ...

  3. Jekyll博客添加Valine评论

    Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...

  4. 给jekyll博客添加搜索功能

    使用SWIFTYPE为jekyll博客添加搜索引擎 步骤 1.首先去swiftype注册一个账号 2.接着添加自己想要配置的网站地址并为新设定的引擎添加一个名字(非会员只能设置一个引擎). 3.收到验 ...

  5. 给jekyll博客添加天气插件

    layout: post title: 给博客添加天气插件 date: 2020-04-26 author: Dapenson header-img: img/post-bg-debug.png ca ...

  6. github page+jekyll搭博客初体验

    div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 10px; padding ...

  7. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  8. 基于Jekyll的博客模板

    代码地址如下:http://www.demodashi.com/demo/13147.html 效果 环境配置 环境 Windows 10 Git Bash 安装ruby 下载rubyinstalle ...

  9. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

随机推荐

  1. Qt: error lnk1158 无法运行rc.exe

    解决办法:(依据自己的环境而定) 将C:\Program Files (x86)\Windows Kits\\bin\10.0.15063.0\x64 目录下的rc.exe 和rcdll.dll 复制 ...

  2. 【JZOJ3214】【SDOI2013】方程

    ╰( ̄▽ ̄)╭ 给定方程 X1+X 2+-+Xn=m 我们对第 1.. n1 个变量 进行一些限制 : X1≤A1 X2≤A2 - Xn1 ≤An1 我们对第 n1+1.. n1+1.. n1+ n2 ...

  3. 大数据ETL详解

    ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直接关接到BI项目的成败.ETL也是一个长期的过程,只有不断的发现问题并解决问题,才能使ETL运行效率更 ...

  4. 掀开SQL的神秘面纱,将优化进行到底

    掀开SQL的神秘面纱,将优化进行到底 有这样一条奇怪的SQL,返回结果不足10行,逻辑读达到1.2w,存在索引却走多次全表扫描,如何揭开它神秘的面纱拯救系统性能,答案在这里,你不可错过! 本文来自上周 ...

  5. 【JZOJ4787】【NOIP2016提高A组模拟9.17】数格子

    题目描述 输入 输出 样例输入 1 10000 3 10000 5 10000 0 0 样例输出 1 11 95 数据范围 每个测试点数据组数不超过10组 解法 状态压缩动态规划. 设f[i][j]表 ...

  6. @spoj - ADAMOLD@ Ada and Mold

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 N 的序列 A,将其划分成 K + 1 段,划分 ...

  7. Hdu 1800 字符串hash

    题目链接 题意: 给出n(n<=3000)个字符串(长度<30,数字组成,肯能存在前导0), 问该序列最少可以分成多少个单调序列.可以转化成求相同字符串的个数的最大值 附上代码: /*** ...

  8. 【Mysql的那些事】Django数据库配置

    1:安装与配置 1:pip install PyMySQL(或者直接使用Pycharm的setting,点击添加PyMySQL) 2:在Django的工程同名子目录的__init__.py文件中添加如 ...

  9. pytorch利用多个GPU并行计算多gpu

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Answer3664/article/de ...

  10. hdu1503 LCS

    题意:如果有相同的字母,这些字母只输出一次.其余的都输出. 先做一次LCS,标记相同的字母,然后回溯输出. #include<stdio.h> #include<string.h&g ...