typora画图

先在 Typora 中，输入 ```mermaid 然后敲击回车，即可初始化一张空白图。

参考：

mermaid官方文档（详细，博客只是常用一些）: https://mermaid-js.github.io/mermaid/#/flowchart

参考文章（只是常用几个）： https://zhuanlan.zhihu.com/p/172635547

一、流程图

语法解释：graph 关键字就是声明一张流程图，TD 表示的是方向，这里的含义是 Top-Down 由上至下

TD从上到下，LR从左到右

graph TD; A-->B;A-->C;B-->D;
#mermaid-svg-0XJXD9LTUrOLuA0J {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0XJXD9LTUrOLuA0J .error-icon{fill:#552222;}#mermaid-svg-0XJXD9LTUrOLuA0J .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0XJXD9LTUrOLuA0J .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-0XJXD9LTUrOLuA0J .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0XJXD9LTUrOLuA0J .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0XJXD9LTUrOLuA0J .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0XJXD9LTUrOLuA0J .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0XJXD9LTUrOLuA0J .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0XJXD9LTUrOLuA0J .marker.cross{stroke:#333333;}#mermaid-svg-0XJXD9LTUrOLuA0J svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0XJXD9LTUrOLuA0J .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0XJXD9LTUrOLuA0J .cluster-label text{fill:#333;}#mermaid-svg-0XJXD9LTUrOLuA0J .cluster-label span{color:#333;}#mermaid-svg-0XJXD9LTUrOLuA0J .label text,#mermaid-svg-0XJXD9LTUrOLuA0J span{fill:#333;color:#333;}#mermaid-svg-0XJXD9LTUrOLuA0J .node rect,#mermaid-svg-0XJXD9LTUrOLuA0J .node circle,#mermaid-svg-0XJXD9LTUrOLuA0J .node ellipse,#mermaid-svg-0XJXD9LTUrOLuA0J .node polygon,#mermaid-svg-0XJXD9LTUrOLuA0J .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0XJXD9LTUrOLuA0J .node .label{text-align:center;}#mermaid-svg-0XJXD9LTUrOLuA0J .node.clickable{cursor:pointer;}#mermaid-svg-0XJXD9LTUrOLuA0J .arrowheadPath{fill:#333333;}#mermaid-svg-0XJXD9LTUrOLuA0J .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0XJXD9LTUrOLuA0J .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0XJXD9LTUrOLuA0J .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-0XJXD9LTUrOLuA0J .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-0XJXD9LTUrOLuA0J .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0XJXD9LTUrOLuA0J .cluster text{fill:#333;}#mermaid-svg-0XJXD9LTUrOLuA0J .cluster span{color:#333;}#mermaid-svg-0XJXD9LTUrOLuA0J div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0XJXD9LTUrOLuA0J :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

A
B
C
D

二、时序图

语法解释：->> 代表实线箭头，-->> 则代表虚线

sequenceDiagramAlice->>John: Hello John, how are you?John-->>Alice: Great!
#mermaid-svg-SmZbsXIe7LEqaW0T {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SmZbsXIe7LEqaW0T .error-icon{fill:#552222;}#mermaid-svg-SmZbsXIe7LEqaW0T .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-SmZbsXIe7LEqaW0T .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-SmZbsXIe7LEqaW0T .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-SmZbsXIe7LEqaW0T .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-SmZbsXIe7LEqaW0T .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-SmZbsXIe7LEqaW0T .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-SmZbsXIe7LEqaW0T .marker{fill:#333333;stroke:#333333;}#mermaid-svg-SmZbsXIe7LEqaW0T .marker.cross{stroke:#333333;}#mermaid-svg-SmZbsXIe7LEqaW0T svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-SmZbsXIe7LEqaW0T .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SmZbsXIe7LEqaW0T text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-SmZbsXIe7LEqaW0T .actor-line{stroke:grey;}#mermaid-svg-SmZbsXIe7LEqaW0T .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-SmZbsXIe7LEqaW0T .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-SmZbsXIe7LEqaW0T #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-SmZbsXIe7LEqaW0T .sequenceNumber{fill:white;}#mermaid-svg-SmZbsXIe7LEqaW0T #sequencenumber{fill:#333;}#mermaid-svg-SmZbsXIe7LEqaW0T #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-SmZbsXIe7LEqaW0T .messageText{fill:#333;stroke:#333;}#mermaid-svg-SmZbsXIe7LEqaW0T .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SmZbsXIe7LEqaW0T .labelText,#mermaid-svg-SmZbsXIe7LEqaW0T .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-SmZbsXIe7LEqaW0T .loopText,#mermaid-svg-SmZbsXIe7LEqaW0T .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-SmZbsXIe7LEqaW0T .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-SmZbsXIe7LEqaW0T .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-SmZbsXIe7LEqaW0T .noteText,#mermaid-svg-SmZbsXIe7LEqaW0T .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-SmZbsXIe7LEqaW0T .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SmZbsXIe7LEqaW0T .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SmZbsXIe7LEqaW0T .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-SmZbsXIe7LEqaW0T .actorPopupMenu{position:absolute;}#mermaid-svg-SmZbsXIe7LEqaW0T .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-SmZbsXIe7LEqaW0T .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-SmZbsXIe7LEqaW0T .actor-man circle,#mermaid-svg-SmZbsXIe7LEqaW0T line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-SmZbsXIe7LEqaW0T :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}AliceJohnHello John, how are you?Great!AliceJohn

三、状态图

语法解释：[*] 表示开始或者结束，如果在箭头右边则表示结束

stateDiagram[*] --> s1s1 --> [*]
#mermaid-svg-Tb7PkAbLf68yh8BO {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Tb7PkAbLf68yh8BO .error-icon{fill:#552222;}#mermaid-svg-Tb7PkAbLf68yh8BO .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Tb7PkAbLf68yh8BO .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Tb7PkAbLf68yh8BO .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Tb7PkAbLf68yh8BO .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Tb7PkAbLf68yh8BO .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Tb7PkAbLf68yh8BO .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Tb7PkAbLf68yh8BO .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Tb7PkAbLf68yh8BO .marker.cross{stroke:#333333;}#mermaid-svg-Tb7PkAbLf68yh8BO svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Tb7PkAbLf68yh8BO defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-Tb7PkAbLf68yh8BO g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-Tb7PkAbLf68yh8BO g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-Tb7PkAbLf68yh8BO g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-Tb7PkAbLf68yh8BO g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-Tb7PkAbLf68yh8BO g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-Tb7PkAbLf68yh8BO .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-Tb7PkAbLf68yh8BO .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-Tb7PkAbLf68yh8BO .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-Tb7PkAbLf68yh8BO .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-Tb7PkAbLf68yh8BO .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-Tb7PkAbLf68yh8BO .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-Tb7PkAbLf68yh8BO .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-Tb7PkAbLf68yh8BO .edgeLabel .label text{fill:#333;}#mermaid-svg-Tb7PkAbLf68yh8BO .label div .edgeLabel{color:#333;}#mermaid-svg-Tb7PkAbLf68yh8BO .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-Tb7PkAbLf68yh8BO .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-Tb7PkAbLf68yh8BO .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-Tb7PkAbLf68yh8BO .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-Tb7PkAbLf68yh8BO .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-Tb7PkAbLf68yh8BO .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Tb7PkAbLf68yh8BO .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Tb7PkAbLf68yh8BO #statediagram-barbEnd{fill:#333333;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Tb7PkAbLf68yh8BO .cluster-label,#mermaid-svg-Tb7PkAbLf68yh8BO .nodeLabel{color:#131300;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-Tb7PkAbLf68yh8BO .note-edge{stroke-dasharray:5;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-note text{fill:black;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram-note .nodeLabel{color:black;}#mermaid-svg-Tb7PkAbLf68yh8BO .statediagram .edgeLabel{color:red;}#mermaid-svg-Tb7PkAbLf68yh8BO #dependencyStart,#mermaid-svg-Tb7PkAbLf68yh8BO #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-Tb7PkAbLf68yh8BO :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

s1

四、类图

语法解释：<|-- 表示继承，+ 表示 public，- 表示 private

classDiagramAnimal <|-- DuckAnimal <|-- FishAnimal <|-- ZebraAnimal : +int ageAnimal : +String genderAnimal: +isMammal()Animal: +mate()class Duck{+String beakColor+swim()+quack()}class Fish{-int sizeInFeet-canEat()}class Zebra{+bool is_wild+run()}
#mermaid-svg-BUbKuYN4kBVanzfo {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-BUbKuYN4kBVanzfo .error-icon{fill:#552222;}#mermaid-svg-BUbKuYN4kBVanzfo .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-BUbKuYN4kBVanzfo .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-BUbKuYN4kBVanzfo .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-BUbKuYN4kBVanzfo .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-BUbKuYN4kBVanzfo .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-BUbKuYN4kBVanzfo .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-BUbKuYN4kBVanzfo .marker{fill:#333333;stroke:#333333;}#mermaid-svg-BUbKuYN4kBVanzfo .marker.cross{stroke:#333333;}#mermaid-svg-BUbKuYN4kBVanzfo svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-BUbKuYN4kBVanzfo g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-BUbKuYN4kBVanzfo g.classGroup text .title{font-weight:bolder;}#mermaid-svg-BUbKuYN4kBVanzfo .nodeLabel,#mermaid-svg-BUbKuYN4kBVanzfo .edgeLabel{color:#131300;}#mermaid-svg-BUbKuYN4kBVanzfo .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-BUbKuYN4kBVanzfo .label text{fill:#131300;}#mermaid-svg-BUbKuYN4kBVanzfo .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-BUbKuYN4kBVanzfo .classTitle{font-weight:bolder;}#mermaid-svg-BUbKuYN4kBVanzfo .node rect,#mermaid-svg-BUbKuYN4kBVanzfo .node circle,#mermaid-svg-BUbKuYN4kBVanzfo .node ellipse,#mermaid-svg-BUbKuYN4kBVanzfo .node polygon,#mermaid-svg-BUbKuYN4kBVanzfo .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-BUbKuYN4kBVanzfo .divider{stroke:#9370DB;stroke:1;}#mermaid-svg-BUbKuYN4kBVanzfo g.clickable{cursor:pointer;}#mermaid-svg-BUbKuYN4kBVanzfo g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-BUbKuYN4kBVanzfo g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-BUbKuYN4kBVanzfo .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-BUbKuYN4kBVanzfo .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-BUbKuYN4kBVanzfo .dashed-line{stroke-dasharray:3;}#mermaid-svg-BUbKuYN4kBVanzfo #compositionStart,#mermaid-svg-BUbKuYN4kBVanzfo .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo #compositionEnd,#mermaid-svg-BUbKuYN4kBVanzfo .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo #dependencyStart,#mermaid-svg-BUbKuYN4kBVanzfo .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo #dependencyStart,#mermaid-svg-BUbKuYN4kBVanzfo .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo #extensionStart,#mermaid-svg-BUbKuYN4kBVanzfo .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo #extensionEnd,#mermaid-svg-BUbKuYN4kBVanzfo .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo #aggregationStart,#mermaid-svg-BUbKuYN4kBVanzfo .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo #aggregationEnd,#mermaid-svg-BUbKuYN4kBVanzfo .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-BUbKuYN4kBVanzfo .edgeTerminals{font-size:11px;}#mermaid-svg-BUbKuYN4kBVanzfo :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()

五、甘特图

甘特图一般用来表示项目的计划排期，目前在工作中经常会用到

语法也非常简单，从上到下依次是图片标题、日期格式、项目、项目细分的任务

gantttitle 工作计划dateFormat  YYYY-MM-DDsection SectionA task           :a1, 2020-01-01, 30dAnother task     :after a1  , 20dsection AnotherTask in sec      :2020-01-12  , 12danother task      : 24d
Mon 06Mon 13Mon 20Mon 27Mon 03Mon 10Mon 17A task Another task Task in sec another task SectionAnother工作计划

六、饼图

饼图使用 pie 表示，标题下面分别是区域名称及其百分比

pietitle Key elements in Product X"Calcium" : 42.96"Potassium" : 50.05"Magnesium" : 10.01"Iron" :  5
#mermaid-svg-JbdEumrayCRn5SPl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JbdEumrayCRn5SPl .error-icon{fill:#552222;}#mermaid-svg-JbdEumrayCRn5SPl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-JbdEumrayCRn5SPl .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-JbdEumrayCRn5SPl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-JbdEumrayCRn5SPl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-JbdEumrayCRn5SPl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-JbdEumrayCRn5SPl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-JbdEumrayCRn5SPl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-JbdEumrayCRn5SPl .marker.cross{stroke:#333333;}#mermaid-svg-JbdEumrayCRn5SPl svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-JbdEumrayCRn5SPl .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-svg-JbdEumrayCRn5SPl .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-svg-JbdEumrayCRn5SPl .slice{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;font-size:17px;}#mermaid-svg-JbdEumrayCRn5SPl .legend text{fill:black;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-JbdEumrayCRn5SPl :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}40%46%9%5%Key elements in Product XCalciumPotassiumMagnesiumIron

使用 Typora 画图相关推荐

  1. Typora Mermaid 使用指南

    暂存参考链接,后续整理. 官方文档 [mermaid]01 typora中使用流程图 typora画图演示-mermaid mermaid工具 Typora Mermaid 流程图 typora画流程 ...

  2. 使用Typora画 流程图、时序图、顺序图、甘特图、等图详解

    目录 概述 一.流程图 二.UML时序图 三.甘特图 四.类图 五.状态图 六.饼图 七.导出 八.总结 概述 Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术,这也是与其他Mar ...

  3. TYPORA语法大全

    转载请标明原创地址:https://blog.csdn.net/SIMBA1949/article/details/79001226 标题的使用 标题的使用格式 标题Typora显示形式是 文本居中 ...

  4. windows高效率神器小软件

    windows高效率神器小软件 文章目录 windows高效率神器小软件 本地文件搜索 文档.笔记 画图 截图 置顶 代办 护眼 看图 压缩 SSH 数据库 PDF 录屏 播放器 其它 本地文件搜索 ...

  5. 还在到处寻找画图软件？快来用Typora画饼图、时序图、流程图、UML图和状态图吧

    Markdown是我最喜欢的写作格式,现在我的博客.笔记等都是用markdown格式写的,基础的文字编辑相关的语法用的已经很顺手了,本文就来记录一下用Markdown编辑器画图的方法. 我现在使用一款 ...

  6. ＞＞运维管理：Typora工具之画图

    Typora工具之画图 + 流程图(flowchart ) 1)TB #mermaid-svg-LCByJDQ3CGUZeSGG .label{font-family:'trebuchet ms', ...

  7. MarkDown教程画图篇1（typora）

    MarkDown教程画图篇1(typora) 基础篇视频讲解链接 画图篇视频讲解链接 九.利用Markdown画图(需勾选扩展语法) markdown画图也是轻量级的,功能并不全. Mermaid 是 ...

  8. typora及有道云笔记makedown画图

    Typora及有道云 应工作需要要编写一些简单的甘特图,特将自己所熟悉的编辑器写法记录如下 Typora是一个功能强大的Markdown编辑器,极简而强大.线下写文件推荐使用Typora,如果要线上协 ...

  9. markdown 画图

    目录 使用方法 graph(流程图) subgraph(子图) sequence diagram (序列图) gantt diagram(甘特图) sequence(序列图) markdown是轻文本 ...

  10. 适合程序员的画图工具

    最近很多读者私信问我,我图解文章中用到的画图工具.思维导图工具.代码贴图工具是什么? 我在很早的时候提到过,不过时间有点久了,而且比较零散,可能现在大部分读者还不知道. 我今天统一整理一下,我图解文章 ...

最新文章

  1. 智能物联网（AIoT，2020年）（上）
  2. ubuntu安装virtualbox
  3. mybatisplus的详细使用（自动填充，乐观锁，分页，条件查询）
  4. 【莫队/树上莫队/回滚莫队】原理详解及例题:小B的询问(普通莫队)，Count on a tree II(树上莫队)，kangaroos(回滚莫队)
  5. 【hdu4010】 Query on The Trees
  6. 15 张图， 把TCP/IP 讲得一清二楚！
  7. Android笔记 fragment入门 动态加载fragment demo+ 判断横竖屏
  8. yum httpd安装详解
  9. html 好看的英文字体,23款网页设计师必备：经典私藏英文字体
  10. java高级能力_java高级技术工程师该具备哪些能力？
  11. 【控制系统的数学模型——传递函数】
  12. scrapy数据清洗:
  13. 7.2 Python 实例11-自动轨迹绘制
  14. 搭建Prometheus监控报警
  15. C语言课程设计 — 飞机大战
  16. 机器学习线性回归实践，广告投放收益预测，手写梯度下降
  17. 出现java.sql.SQLException: Subquery returns more than 1 row错误的原因，解决方法
  18. ElementUI 年份范围选择器
  19. css动画--使用图标进行顺时针与逆时针转圈
  20. echarts 弹出放大_Echarts：初始放大地图类型

热门文章

  1. 3步教你如何做好技术入股
  2. 【笔记】程序性能优化28个策略原则
  3. Android经典铃声等等等等,低调而优雅：40 款经典黑莓手机铃声精选（安卓手机适用）...
  4. 比亚迪秦后排座椅拆卸
  5. 程序员防猝死指南——程序员养生攻略
  6. 91-Lucene+ElasticSeach核心技术
  7. win10虚拟机连接服务器失败怎么办,Win10虚拟机无法连接网络的解决方法教程
  8. 测试固态硬盘好坏的软件,电脑怎么测试ssd固态硬盘|电脑测试ssd固态硬盘的方法...
  9. 开源社区ECE：Elastic认证考试复盘总结134贴
  10. 解除360的系统压缩