专栏首页赵俊的Java专栏Hexo优化 --- 利用 Markdown 语法画流程图

Hexo优化 --- 利用 Markdown 语法画流程图

添加支持

Hexo 默认是不支持流程图的 Markdown 语法的,需要添加支持:

1

npm install --save hexo-filter-flowchart

演示

一个最简单的流程图

···flow    #由于渲染问题,请自行将 · 替换为 `
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?

st->op->cond
cond(yes)->e
cond(no)->op
···

st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?

st->op->cond
cond(yes)->e
cond(no)->op

一个复杂的流程图

···flow    #由于渲染问题,请自行将 · 替换为 `
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
···

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

语法详解

Hexo 中的流程图是依赖于 flowchart.js 实现的。

以上面那个复杂的流程图为例:

···flow    #由于渲染问题,请自行将 · 替换为 `
//定义部分
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?:>http://www.google.com
io=>inputoutput: catch something...

//判断和位置控制
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
···

例如这一句:

1

st=>start: Start|past:>http://www.google.com[blank]

其中,st 是变量名, start 是指操作模块名,冒号后面就是内容了。需要注意的是,冒号后要加空格才能识别

操作模块语法

操作模块

说明

start

开始

end

结束

opration

普通操作块

condition

判断块

subroutine

子任务块

inputoutput

输入输出块

判断和位置控制

####流程控制
st->op1->e

# -> 作为控制流程的操作符,就是指向下一步要操作的。
# 每一条都算是一条流程

# 你也可以断开写,怎么方便怎么来,如:下面两个是一样的。

#分着写
st->op1
op1->e

#合着写
st->op1->e

####判断
cond(yes)->io->e    #yes的时候到io,再到e

#位置指定
cond(no)->sub1(right)->op1  #no的时候到到 sub1,再从sub1的右侧到op1   
#还可以这样 cond1(no,right)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一款基于 Shiro 的权限管理系统,支持 restful 风格 URL.

    本项目使用 Spring Boot 搭建, 用于加深对 Spring Boot 与 Shiro 的学习, 项目特色是支持 restful 风格权限控制, 支持对...

    一份执着✘
  • LeetCode 26 Remove Duplicates from Sorted Array

    一份执着✘
  • Shiro 集成 Spring 之注解

    集成 Spring 后我们通过过滤器链来配置每个 URL 需要的权限,但当配置多了以后就会不方便,而且只支持 URL 级别的配置。

    一份执着✘
  • 如何在 Ubuntu 20.04 上安装 Memcached

    Memcached 是一个免费并且开源的高性能内存键值数据库。它主要用于系统缓存,通过缓存数据库中的结果来提高应用的响应速度。

    雪梦科技
  • Docker 简介与安装

    Github: https://github.com/yingzk/MyDocker

    YingJoy_
  • Docker学习笔记(1):CentOS7安装Docker

    Docker是一个基于Go语言实现的开源应用容器引擎,通过对应用组件的封装、分发、部署、运行等生命周期的管理,使程序及其运行环境能够做到“一次封装,到处运行”。

    布禾
  • 当七夕遇上算法竞赛

      七夕节因牛郎织女的传说而被扣上了「情人节」的帽子。于是TYVJ今年举办了一次线下七夕祭。Vani同学今年成功邀请到了cl同学陪他来共度七夕,于是他们决定去T...

    ACM算法日常
  • Docker 简介与安装

    Github:https://github.com/yingzk/MyDocker 1. Docker 简介 Docker是一个开源(Github地址: htt...

    YingJoy_
  • CSS3常用功能的写法

    但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题。上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法。

    ruanyf
  • javascript 中的位运算符

    前端小书童

扫码关注云+社区

领取腾讯云代金券