这里写自定义目录标题

<a href="#23232httpsimgblogcsdnimgcnimg_convert43038b7fde1551b1070d5aec0d8cbf5ejpeg_1">23232</a> <a href="#Markdown_2">欢迎使用Markdown编辑器</a>

<a href="#_6">新的改变</a>    <a href="#_19">功能快捷键</a>    <a href="#_35">合理的创建标题，有助于目录的生成</a>    <a href="#_41">如何改变文本的样式</a>    <a href="#_57">插入链接与图片</a>    <a href="#_71">如何插入一段漂亮的代码片</a>    <a href="#_79">生成一个适合你的列表</a>    <a href="#_92">创建一个表格</a>    
 
  <a href="#_100">设定内容居中、居左、居右</a>      <a href="#SmartyPants_108">SmartyPants</a>         <a href="#_116">创建一个自定义列表</a>    <a href="#_124">如何创建一个注脚</a>    <a href="#_130">注释也是必不可少的</a>    <a href="#KaTeX_136">KaTeX数学公式</a>    <a href="#_149">新的甘特图功能，丰富你的文章</a>    <a href="#UML__163">UML 图表</a>    <a href="#FLowchart_191">FLowchart流程图</a>    <a href="#_208">导出与导入</a>    
 
  <a href="#_210">导出</a>      <a href="#_213">导入</a>            

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的 KaTeX数学公式 语法； 增加了支持甘特图的mermaid语法<sup class="footnote-ref"><a href="#fn1" id="fnref1">1</a></sup> 功能； 增加了 多屏幕编辑 Markdown文章功能； 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间； 增加了 检查列表 功能。

功能快捷键

撤销：<kbd>Ctrl/Command</kbd> + <kbd>Z</kbd> 重做：<kbd>Ctrl/Command</kbd> + <kbd>Y</kbd> 加粗：<kbd>Ctrl/Command</kbd> + <kbd>B</kbd> 斜体：<kbd>Ctrl/Command</kbd> + <kbd>I</kbd> 标题：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd> 无序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd> 有序列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd> 检查列表：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd> 插入代码：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> 插入链接：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> 插入图片：<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd> 查找：<kbd>Ctrl/Command</kbd> + <kbd>F</kbd> 替换：<kbd>Ctrl/Command</kbd> + <kbd>G</kbd>

合理的创建标题，有助于目录的生成

直接输入1次<kbd>#</kbd>，并按下<kbd>space</kbd>后，将生成1级标题。 输入2次<kbd>#</kbd>，并按下<kbd>space</kbd>后，将生成2级标题。 以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

<mark>标记文本</mark>

<s>删除文本</s>

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: <a href="https://www.csdn.net/">link</a>.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去<a href="https://mp.csdn.net/console/configBlog">博客设置</a>页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目

项目

 项目         

项目1 项目2 项目3

<input type="checkbox" class="task-list-item-checkbox" disabled> 计划任务 <input type="checkbox" class="task-list-item-checkbox" checked="true" disabled> 完成任务

创建一个表格

一个简单的表格是这么创建的：

<table> <thead> <tr> <th>项目</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>电脑</td> <td>$1600</td> </tr> <tr> <td>手机</td> <td>$12</td> </tr> <tr> <td>导管</td> <td>$1</td> </tr> </tbody> </table>nn### 设定内容居中、居左、居右

使用:---------:居中 使用:----------居左 使用----------:居右

<table> <thead> <tr> <th align="center">第一列</th> <th align="right">第二列</th> <th align="left">第三列</th> </tr> </thead> <tbody> <tr> <td align="center">第一列文本居中</td> <td align="right">第二列文本居右</td> <td align="left">第三列文本居左</td> </tr> </tbody> </table>nn### SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

<table> <thead> <tr> <th>TYPE</th> <th>ASCII</th> <th><abbr title="超文本标记语言">HTML</abbr></th> </tr> </thead> <tbody> <tr> <td>Single backticks</td> <td>'Isn't this fun?'</td> <td>‘Isn’t this fun?’</td> </tr> <tr> <td>Quotes</td> <td>"Isn't this fun?"</td> <td>“Isn’t this fun?”</td> </tr> <tr> <td>Dashes</td> <td>-- is en-dash, --- is em-dash</td> <td>– is en-dash, — is em-dash</td> </tr> </tbody> </table>nn## 创建一个自定义列表

<dl> Markdown <dd> Text-to- <abbr title="超文本标记语言">HTML</abbr> conversion tool </dd> Authors <dd> John </dd> <dd> Luke </dd> </dl>

如何创建一个注脚

一个具有注脚的文本。<sup class="footnote-ref"><a href="#fn2" id="fnref2">2</a></sup>

注释也是必不可少的

Markdown将文本转换为 <abbr title="超文本标记语言">HTML</abbr>。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 <a href="https://khan.github.io/KaTeX/">KaTeX</a>:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式<a href="http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference">here</a>.

新的甘特图功能，丰富你的文章

<svg xmlns="http://www.w3.org/2000/svg" id="mermaid-svg-9AeTkupy2QPclTkO" height="100%" viewbox="0 0 500 196"> <g></g> <g class="grid" transform="translate(75, 146)"> <g class="tick" transform="translate(0,0)" style="opacity: 1;"> </line> <text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;"> Mon 06 </text> </g> <g class="tick" transform="translate(153,0)" style="opacity: 1;"> </line> <text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;"> Mon 13 </text> </g> <g class="tick" transform="translate(306,0)" style="opacity: 1;"> </line> <text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;"> Mon 20 </text> </g>

</path> </g> <g> <rect x="0" y="48" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="72" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="96" width="462.5" height="24" class="section section0"></rect> <rect x="0" y="120" width="462.5" height="24" class="section section0"></rect> </g> <g> <rect rx="3" ry="3" x="75" y="50" width="44" height="20" class="task done0"></rect> <rect rx="3" ry="3" x="141" y="74" width="65" height="20" class="task active0"></rect> <rect rx="3" ry="3" x="206" y="98" width="110" height="20" class="task task0"></rect> <rect rx="3" ry="3" x="316" y="122" width="109" height="20" class="task task0"></rect> <text font-size="11" x="97" y="63.5" text-height="20" class="taskText taskText0 doneText0"> 已完成 </text> <text font-size="11" x="173.5" y="87.5" text-height="20" class="taskText taskText0 activeText0"> 进行中 </text> <text font-size="11" x="261" y="111.5" text-height="20" class="taskText taskText0 "> 计划一 </text> <text font-size="11" x="370.5" y="135.5" text-height="20" class="taskText taskText0 "> 计划二 </text> </g> <g> <text x="10" y="98" class="sectionTitle sectionTitle0"> 现有任务 </text> </g> <g class="today"> </line> </g> <text x="250" y="25" class="titleText"> Adding GANTT diagram functionality to mermaid </text> </svg>

关于 甘特图 语法，参考 <a href="https://mermaidjs.github.io/">这儿</a>,

UML 图表

可以使用UML图表进行渲染。 <a href="https://mermaidjs.github.io/">Mermaid</a>. 例如下面产生的一个序列图：

<svg id="mermaid-svg-DynoXcF0cukJAqf0" width="100%" xmlns="http://www.w3.org/2000/svg" height="522" style="max-width: 889px;" viewbox="-50 -10 889 522"> <style>#mermaid-svg-DynoXcF0cukJAqf0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-DynoXcF0cukJAqf0 .error-icon{fill:#552222;}#mermaid-svg-DynoXcF0cukJAqf0 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-DynoXcF0cukJAqf0 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-DynoXcF0cukJAqf0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-DynoXcF0cukJAqf0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-DynoXcF0cukJAqf0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-DynoXcF0cukJAqf0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-DynoXcF0cukJAqf0 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-DynoXcF0cukJAqf0 .marker.cross{stroke:#333333;}#mermaid-svg-DynoXcF0cukJAqf0 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-DynoXcF0cukJAqf0 .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-DynoXcF0cukJAqf0 text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-DynoXcF0cukJAqf0 .actor-line{stroke:grey;}#mermaid-svg-DynoXcF0cukJAqf0 .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-DynoXcF0cukJAqf0 .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-DynoXcF0cukJAqf0 #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-DynoXcF0cukJAqf0 .sequenceNumber{fill:white;}#mermaid-svg-DynoXcF0cukJAqf0 #sequencenumber{fill:#333;}#mermaid-svg-DynoXcF0cukJAqf0 #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-DynoXcF0cukJAqf0 .messageText{fill:#333;stroke:#333;}#mermaid-svg-DynoXcF0cukJAqf0 .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-DynoXcF0cukJAqf0 .labelText,#mermaid-svg-DynoXcF0cukJAqf0 .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-DynoXcF0cukJAqf0 .loopText,#mermaid-svg-DynoXcF0cukJAqf0 .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-DynoXcF0cukJAqf0 .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-DynoXcF0cukJAqf0 .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-DynoXcF0cukJAqf0 .noteText,#mermaid-svg-DynoXcF0cukJAqf0 .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-DynoXcF0cukJAqf0 .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-DynoXcF0cukJAqf0 .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-DynoXcF0cukJAqf0 .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-DynoXcF0cukJAqf0 .actorPopupMenu{position:absolute;}#mermaid-svg-DynoXcF0cukJAqf0 .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-DynoXcF0cukJAqf0 .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-DynoXcF0cukJAqf0 .actor-man circle,#mermaid-svg-DynoXcF0cukJAqf0 line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-DynoXcF0cukJAqf0 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style> <g></g> <defs> <symbol id="computer" width="24" height="24">

</path> </symbol> </defs> <defs> <symbol id="database" fill-rule="evenodd">

</path> </symbol> </defs> <defs> <symbol id="clock" width="24" height="24">

</path> </symbol> </defs> <g> </line> <g id="root-15"> <rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="75" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="75" dy="0"> 张三 </tspan> </text> </g> </g> <g> </line> <g id="root-16"> <rect x="247" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="322" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="322" dy="0"> 李四 </tspan> </text> </g> </g> <g> </line> <g id="root-17"> <rect x="477" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="552" y="32.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="552" dy="0"> 王五 </tspan> </text> </g> </g> <defs> <marker id="arrowhead" refx="9" refy="5" markerunits="userSpaceOnUse" markerwidth="12" markerheight="12" orient="auto">

</path> </marker> </defs> <defs> <marker id="crosshead" markerwidth="15" markerheight="8" orient="auto" refx="16" refy="4">

</path>

</path> </marker> </defs> <defs> <marker id="filled-head" refx="18" refy="7" markerwidth="20" markerheight="28" orient="auto">

</path> </marker> </defs> <defs> <marker id="sequencenumber" refx="15" refy="15" markerwidth="60" markerheight="40" orient="auto"> <circle cx="15" cy="15" r="6"></circle> </marker> </defs> <text x="199" y="80" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 16px; font-weight: 400;"> 你好！李四, 最近怎么样? </text> </line> <text x="437" y="128" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 16px; font-weight: 400;"> 你最近怎么样，王五？ </text> </line> <text x="199" y="176" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 16px; font-weight: 400;"> 我很好，谢谢! </text> </line> <text x="437" y="224" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 16px; font-weight: 400;"> 我很好，谢谢! </text> </line> <g> <rect x="577" y="267" fill="#EDF2AE" stroke="#666" width="212" height="53" rx="0" ry="0" class="note"></rect> <text x="683" y="272" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 14px; font-weight: 400;"> <tspan x="683"> 李四想了很长时间, 文字太长了 </tspan> </text> <text x="683" y="289" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="noteText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 14px; font-weight: 400;"> <tspan x="683"> 不适合放在一行. </tspan> </text> </g> <text x="199" y="335" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 16px; font-weight: 400;"> 打量着王五... </text> </line> <text x="314" y="383" text-anchor="middle" dominant-baseline="middle" alignment-baseline="middle" class="messageText" dy="1em" style="font-family: "trebuchet ms", verdana, arial, sans-serif; font-size: 16px; font-weight: 400;"> 很好... 王五, 你怎么样? </text> </line> <g> <rect x="0" y="436" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="75" y="468.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="75" dy="0"> 张三 </tspan> </text> </g> <g> <rect x="247" y="436" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="322" y="468.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="322" dy="0"> 李四 </tspan> </text> </g> <g> <rect x="477" y="436" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect> <text x="552" y="468.5" dominant-baseline="central" alignment-baseline="central" class="actor" style="text-anchor: middle; font-size: 14px; font-weight: 400; font-family: Open-Sans, "sans-serif";"> <tspan x="552" dy="0"> 王五 </tspan> </text> </g> </svg>

这将产生一个流程图。:

<svg id="mermaid-svg-ijmSTdudk6IYsAlU" width="100%" xmlns="http://www.w3.org/2000/svg" height="158" style="max-width: 404.20001220703125px;" viewbox="0 0 404.20001220703125 158"> <style>#mermaid-svg-ijmSTdudk6IYsAlU {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ijmSTdudk6IYsAlU .error-icon{fill:#552222;}#mermaid-svg-ijmSTdudk6IYsAlU .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ijmSTdudk6IYsAlU .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ijmSTdudk6IYsAlU .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ijmSTdudk6IYsAlU .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ijmSTdudk6IYsAlU .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ijmSTdudk6IYsAlU .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ijmSTdudk6IYsAlU .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ijmSTdudk6IYsAlU .marker.cross{stroke:#333333;}#mermaid-svg-ijmSTdudk6IYsAlU svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ijmSTdudk6IYsAlU .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-ijmSTdudk6IYsAlU .cluster-label text{fill:#333;}#mermaid-svg-ijmSTdudk6IYsAlU .cluster-label span{color:#333;}#mermaid-svg-ijmSTdudk6IYsAlU .label text,#mermaid-svg-ijmSTdudk6IYsAlU span{fill:#333;color:#333;}#mermaid-svg-ijmSTdudk6IYsAlU .node rect,#mermaid-svg-ijmSTdudk6IYsAlU .node circle,#mermaid-svg-ijmSTdudk6IYsAlU .node ellipse,#mermaid-svg-ijmSTdudk6IYsAlU .node polygon,#mermaid-svg-ijmSTdudk6IYsAlU .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ijmSTdudk6IYsAlU .node .label{text-align:center;}#mermaid-svg-ijmSTdudk6IYsAlU .node.clickable{cursor:pointer;}#mermaid-svg-ijmSTdudk6IYsAlU .arrowheadPath{fill:#333333;}#mermaid-svg-ijmSTdudk6IYsAlU .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ijmSTdudk6IYsAlU .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ijmSTdudk6IYsAlU .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ijmSTdudk6IYsAlU .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ijmSTdudk6IYsAlU .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ijmSTdudk6IYsAlU .cluster text{fill:#333;}#mermaid-svg-ijmSTdudk6IYsAlU .cluster span{color:#333;}#mermaid-svg-ijmSTdudk6IYsAlU 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-ijmSTdudk6IYsAlU :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style> <g> <g class="output"> <g class="clusters"></g> <g class="edgePaths"> <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">

</path> <defs> <marker id="arrowhead105" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-A LE-C" style="opacity: 1;" id="L-A-C">

</path> <defs> <marker id="arrowhead106" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-B LE-D" style="opacity: 1;" id="L-B-D">

</path> <defs> <marker id="arrowhead107" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> <g class="edgePath LS-C LE-D" style="opacity: 1;" id="L-C-D">

</path> <defs> <marker id="arrowhead108" viewbox="0 0 10 10" refx="9" refy="5" markerunits="strokeWidth" markerwidth="8" markerheight="6" orient="auto">

</path> </marker> </defs> </g> </g> <g class="edgeLabels"> <g class="edgeLabel" transform="translate(117,31)" style="opacity: 1;"> <g transform="translate(-16,-13)" class="label"> <rect rx="0" ry="0" width="32" height="26"></rect> <foreignobject width="32" height="26"> 链接
</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> <g class="edgeLabel" style="opacity: 1;" transform=""> <g transform="translate(0,0)" class="label"> <rect rx="0" ry="0" width="0" height="0"></rect> <foreignobject width="0" height="0">

</foreignobject> </g> </g> </g> <g class="nodes"> <g class="node default" id="flowchart-A-88" transform="translate(42,79)" style="opacity: 1;"> <rect rx="0" ry="0" x="-34" y="-23" width="68" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-24,-13)"> <foreignobject width="48" height="26">
长方形
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="flowchart-B-89" transform="translate(208,31)"> <circle x="-18" y="-23" r="23" class="label-container"></circle> <g class="label" transform="translate(0,0)"> <g transform="translate(-8,-13)"> <foreignobject width="16" height="26">
圆
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="flowchart-C-91" transform="translate(208,127)"> <rect rx="5" ry="5" x="-50" y="-23" width="100" height="46" class="label-container"></rect> <g class="label" transform="translate(0,0)"> <g transform="translate(-40,-13)"> <foreignobject width="80" height="26">
圆角长方形
</foreignobject> </g> </g> </g> <g class="node default" style="opacity: 1;" id="flowchart-D-93" transform="translate(352.0999984741211,79)">

</polygon> <g class="label" transform="translate(0,0)"> <g transform="translate(-16,-13)"> <foreignobject width="32" height="26">
菱形
</foreignobject> </g> </g> </g> </g>

</g> </g> </svg>

关于 Mermaid 语法，参考 <a href="https://mermaidjs.github.io/">这儿</a>,

FLowchart流程图

我们依旧会支持flowchart的流程图：

<svg height="358.5" version="1.1" width="137.00000190734863" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;" viewbox="0 0 137.00000190734863 358.5" preserveaspectratio="xMidYMid meet"> <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> Created with Raphaël 2.3.0 </desc> <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <marker id="raphael-marker-endblock33-objltcsc" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> </marker> <marker id="raphael-marker-endblock33-objlwepd" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> </marker> <marker id="raphael-marker-endblock33-obj00nv6" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> </marker> <marker id="raphael-marker-endblock33-objt1q4q" markerheight="3" markerwidth="3" orient="auto" refx="1.5" refy="1.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <use transform="rotate(180 1.5 1.5) scale(0.6,0.6)" stroke-width="1.6667" fill="black" stroke="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></use> </marker> </defs> <rect x="0" y="0" width="48.66666793823242" height="38" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="st" transform="matrix(1,0,0,1,32.1667,11.5)"></rect> <text x="10" y="19" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="stt" class="flowchartt" transform="matrix(1,0,0,1,32.1667,11.5)" stroke-width="1"> <tspan dy="5.666666507720947" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 开始 </tspan> </text> <rect x="0" y="0" width="76.66666793823242" height="38" rx="0" ry="0" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="op" transform="matrix(1,0,0,1,18.1667,111)"></rect> <text x="10" y="19" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="opt" class="flowchartt" transform="matrix(1,0,0,1,18.1667,111)" stroke-width="1"> <tspan dy="5.666666507720947" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 我的操作 </tspan> </text> </path> <text x="32.25000047683716" y="28.5" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="condt" class="flowchartt" transform="matrix(1,0,0,1,2,201)" stroke-width="1"> <tspan dy="5.666666030883789" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 确认？ </tspan> </text> <rect x="0" y="0" width="48.66666793823242" height="38" rx="20" ry="20" fill="#ffffff" stroke="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke-width="1" class="flowchart" id="e" transform="matrix(1,0,0,1,32.1667,319.5)"></rect> <text x="10" y="19" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" id="et" class="flowchartt" transform="matrix(1,0,0,1,32.1667,319.5)" stroke-width="1"> <tspan dy="5.666666507720947" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 结束 </tspan> </text> </path> </path> </path> <text x="61.500000953674316" y="268" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" stroke-width="1"> <tspan dy="4.9999895095825195" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> yes </tspan> </text> </path> <text x="116.00000190734863" y="219.5" text-anchor="start" font-size="14px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-family: sans-serif; font-size: 14px; font-weight: normal;" stroke-width="1"> <tspan dy="4.9999895095825195" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> no </tspan> </text> </svg>

关于 Flowchart流程图 语法，参考 <a href="http://adrai.github.io/flowchart.js/">这儿</a>.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入， 继续你的创作。

<hr class="footnotes-sep"> <section class="footnotes">

<a href="https://mermaidjs.github.io/">mermaid语法说明</a> <a href="#fnref1" class="footnote-backref">↩︎</a>

注脚的解释 <a href="#fnref2" class="footnote-backref">↩︎</a>

</section>

原文地址：https://blog.csdn.net/enemy_sprites/article/details/126426319?ops_request_misc=&request_id=2b738d7fd40e442a82fd9ffe84137110&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-13-126426319-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=markdown