Markdown Sublime flowchart.js 流程图
先亮出来一个 flowchart.js 的 Sample
- 给 Sublime 安装 MarkdownPreview,这个不必多说了
- Sublime Text -> Preferences -> Package Settings -> Markdown Preview -> Settings
- 修改 MarkdownPreview.sublime-settings 文件:
{
"enable_uml": true,
/*
Enable or not mathjax support.
*/
"enable_mathjax": true,
/*
Enable highlighting. This enables codehilite extension if not already enabled.
*/
"enable_highlight": true,
"js": [ // Required libraries to transform UML notation
"https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js",
"https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js",
"https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.12.2/flowchart.min.js",
// This library applies the above libraries to the fenced code blocks `flow` and `sequence`.
"res://MarkdownPreview/js/uml.js"
],
}
保存,关闭
然后在你的 fuck.md 文件中输入
```flow
st=>start: Start:>https://www.google.com[blank]
e=>end:>https://www.google.com
op1=>operation: My Operation|current
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```
然后 Preview
注意 =>
两边不能有空格
语法:
nodeName=>nodeType: nodeText[|flowstate][:>urlLink]
[]
里的内容可选
2019.11.13 更新:
Chrome 有个 MDEditor 插件很不错,可以实时编辑预览,长这样:
Markdown Sublime flowchart.js 流程图的更多相关文章
- Sublime text3 JS语法检测工具安装及使用
Sublime text3 JS语法检测工具安装及使用 工具/原料 sublime text3 nodejs sublimeLinter sublimeLinter-jshint 方法/步骤 首先ct ...
- sublime格式化js、css、html的通用插件-html js css pretty
sublime格式化js.css.html的通用插件-html js css pretty: 这个插件可以格式化基本上所有js html css文件,包括写在html中的js代码 ,可以在packag ...
- Evernote Markdown Sublime使用介绍
版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4002619.html 这一篇博客继续探讨:Evernote ...
- 使用mermain用Markdown的语法画流程图和UML图
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用mermain用Markdown的语法画流程图和UML图.
- [Javascirpt] Developer-friendly Flow Charts with flowchart.js
Flowchart.js is a great tool for creating quick, simple flowcharts in a way that keeps you out of a ...
- 前端 go.js 流程图基于vue开发项目案例
一.流程图效果 最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发.其次,要依赖于内部API开发需求,开发项目需求 ...
- sublime的js调试环境(基于node环境)
很多的语言都有控制台,都要专门的ide,js,用sublime在node的环境下,可以配置console, 如何配置?首先,要有node的环境,下载安装,还要安装到c盘才行,然后找到'工具(tool) ...
- 【markdown】使用 js 实现自己得markdown 网页编辑器
首先从这里下载其浏览器版: https://github.com/evilstreak/markdown-js/releases 解压缩后在其js文件同目录下新建一个网页进行测试,代码如下: < ...
- Evernote Markdown Sublime实现
版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/3996164.html Evernote无法实现markdow ...
随机推荐
- Java生鲜电商平台-关于学习生鲜电商平台的思考(小程序/APP)
Java生鲜电商平台-关于学习生鲜电商平台的思考(小程序/APP) 说明:最近群里面的一个网友问的一个问题,让我陷入了深思,他问的问题很基础也很真实,"大佬,你们是怎么学习的呢?" ...
- Xshell 打开时,初始运行卡慢优化方法
我使用的是Xshell 6免费版,有需要的同学可以去这个地址下载:https://www.netsarang.com/download/down_form.html?code=622 一开始安装完Xs ...
- java封装基础详解
java封装基础详解 java的封装性即是信息隐藏,把对象的属性和行为结合成一个相同的独立单体,并尽可能地隐藏对象的内部细节. 封装的特性是对属性来讲的. 封装的目标就是要实现软件部件的"高 ...
- Apache Flink上传路径遍历(CVE-2020-17518)
影响版本 Flink1.5.1-1.11.2 复现 POST /jars/upload HTTP/1.1 Host: localhost:8081 Accept-Encoding: gzip, def ...
- wdlinux一键安装包
下载安装(ssh登录服务器,执行如下操作即可,需要用到root用户权限来安装) v3版本已经发布,更多可看论坛 wdCP v3版本讨论区 更多安装请看 http://www.wdlinux.cn/bb ...
- linux命令打基础
目录 一.shell概述 二.linux命令分类 三.linux命令行 3.1 格式 3.2 编辑Linux命令行 四.Linux基础命令 4.1 pwd:查看当前的工作目录 4.2 cd:切换工作目 ...
- MySQL-初见
目录 初识MySQL 数据库基本命令 创建数据库表 数据库引擎 修改和删除表字段 MySQL数据管理 DML语言 DQL查询数据 单表查询 WHERE条件子句 模糊查询:比较操作符 联表查询 排序查询 ...
- alpakka-kafka(8)-kafka数据消费模式实现
上篇介绍了kafka at-least-once消费模式.kafka消费模式以commit-offset的时间节点代表不同的消费模式,分别是:at-least-once, at-most-once, ...
- Linux线程简单介绍
1.进程与线程 2.使用线程的理由 3.有关线程操作的函数 4.线程之间的互斥 5.线程之间的同步 6.试题最终代码 1.进程与线程 进程是程序执行时的一个实例,即它是程序已经执行到何种程度的数据结构 ...
- VueApp监听手机物理返回键的事件
代码 第一步创建js文件夹子 在main里面引用 JS文本内容如下 //监听手机物理返回键的事件 document.addEventListener('plusready', function() ...