Typora--Draw Diagrams With Markdown
Typora
Typora supports some Markdown extension for diagrams, you could enable this feature from preference panel.
When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included, but diagrams features are not supported when exporting markdown into other file formats in current version. Besides, you should also notice that diagrams is not supported by standard Markdown, CommonMark or GFM. Therefore, we still recommend you to insert an image of these diagrams instead of write them in Markdown directly.
Sequence
It is powered by js-sequence, which would turn following code block into rendered diagrams:
```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```
Please refer here for syntax explanation.
Flowchart
It is powered by flowchart.js, which would turn following code block into rendered diagrams:
```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```
Mermaid
Typora also has integration with mermaid, which supports sequence, flowchart and Gantt.
Sequence
see this doc
```mermaid
%% Example of sequence diagram
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
```
Flowchart
see this doc
```mermaid
graph LR
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
Gantt
see this doc
```mermaid
%% Example with slection of syntaxes
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
```
https://support.typora.io/Draw-Diagrams-With-Markdown/
Typora--Draw Diagrams With Markdown的更多相关文章
- Typora/VSCode/Sublime 更改Markdown默认宽度样式等
Typora 所见即所得Markdown编辑器更改 最大宽度 C:\Users\Desk\AppData\Roaming\Typora\themes\github.css CSS第46行改为 max- ...
- 修改Typora的快捷键【markdown软件】
修改Typora的快捷键 魔芋:Typora是一款不错的编写markdowm的软件,推荐使用. 魔芋:修改这个文件conf.user.json "keyBinding": { ...
- 写Markdown费事?Typora让你像写word一样行云流水,所见即所得。
Typora 简介 Typora删除了预览窗口,以及所有其他不必要的干扰.取而代之的是实时预览. Markdown的语法因不同的解析器或编辑器而异,Typora使用的是GitHub Flavored ...
- Typora 精美而强大的Markdown编辑器
Typora 精美而强大的Markdown编辑器 转 https://www.jianshu.com/p/45e284645d30 Markdown编辑器千千万,可是有颜值.功能强并且免费的,就没有 ...
- Typora 精美而强大的Markdown编辑器 转
Typora 精美而强大的Markdown编辑器 Markdown编辑器千千万,可是有颜值.功能强并且免费的,就没有几个了.之前一直在用Mou,分屏预览模式方便得很,是一个非常好的选择.不过这篇可不是 ...
- Typora画各类流程图、甘特图、饼图等详细文档
Draw Diagrams With Markdown August 15, 2016 by typora.io Typora supports some Markdown extensions fo ...
- Machine Learning 学习笔记 01 Typora、配置OSS、导论
Typora 安装与使用. Typora插件. OSS图床配置. 机器学习导论. 机器学习的基本思路. 机器学习实操的7个步骤
- Markdown工具之---Typora
在项目集成阶段中,接口文档是不可避免的,以往的我使用word编辑器编写接口文档,虽然word使用不是很熟练,但是只要在网上下载模板或者自己花时间搞定一个文档格式 基本能一劳永逸.但是还是会有很多问题存 ...
- Typora 和 markdown
目录 Typora 和 markdown Typora 简单介绍 markdown语法 导出 Typora 和 markdown Typora 简单介绍 支持markdown的一款优雅的编辑器. 绿色 ...
随机推荐
- 小心transform
张老师总结的,感谢! <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- rman理论(一)
1) 快照控制文件:开始备份后,RMAN 需要这些信息在备份操作期间保持一致,也就是说RMAN需要一个读取一致的控制文件视图. 除非RMAN 在备份持续时间内锁定控制文件,否则数据库会不断更新控制文件 ...
- 洛谷P1352——动规
题目:https://www.luogu.org/problemnew/show/P1352 代码如下: #include<iostream> #include<cstdio> ...
- JavaScript:非输入框禁用退格键
在js文件或<javascript>标签中加入如下代码: /** *非输入框禁用退格键 */ function banBackspace(e) { var ev = e || window ...
- Java虚拟机学习 - 体系结构 内存模型(转载)
一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代” .“非堆”, 它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共享的内存区域.默认最小值为16MB, ...
- 《Java多线程编程核心技术》读后感(十二)
类ThreadLocal的使用 主要解决的是每个线程绑定自己的值,可以将ThreadLocal类比喻成全局存放数据的盒子,盒子中可以存储每个线程私有数据. 类ThreadLocal解决的是变量在不同线 ...
- Ubuntu中的minicom
需要更新一下软件源: sudo apt-get update 安装 在终端中输入sudo apt-get install minicom 配置 输入sudo minicom -s,注意前边一定要加su ...
- Newtonsoft.Json序列化字符串-格式化和时间格式问题
最近C#中需要将实体进行json序列化,使用了Newtonsoft.Json public static void TestJson() { DataTable d ...
- mock测试方法及实践改进
此文已由作者翟曜授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. mock测试常见的定义为:在测试过程中,对于某些不易构造或不易获取的对象,通过创建虚拟对象的方式来模拟测试的测 ...
- mui框架使用心得
这段时间一直在用mui框架做项目,现在很多快速开发的app大部分是用MUI和APICloud开发的.所以我就把他们对比了一下. mui有自己的UI组件,我在项目中,很少用框架的UI组件,而使用框架的j ...