在降价中制作美人鱼图
- 尊渡假赌尊渡假赌尊渡假赌原创
- 2025-03-13 13:21:10784浏览
美人鱼图和流程图一直在引起关注，尤其是Github宣布它们在Markdown中得到了本地支持。让我们看一下它们是什么，如何使用它们以及同样重要的是：为什么。
就像您可能想将Codepen演示直接嵌入文档源中一样，将图表和图表活在文本附近有助于防止它们腐烂- 也就是说，与文档状态不同步。就像无用的，过时的或其他误导性的评论在客观上可能比没有评论更糟糕，图表也是如此。
美人鱼图与jamstack和静态站点生成器配对，这些生成器继续越来越受欢迎。配对是自然的。虽然美人鱼图不是宣传的，但会受到降低的启发。使用相同的标记抽象Markdown提供了标记代码，美人鱼可以与输出图和流程图相同。而Markdown是jamstack和静态网站，因为花生酱是果冻。
如果您的网站是在Markdown中撰写的，并将其处理到HTML中，并且您有足够的控制来添加一些自定义的JavaScript，那么您可以使用本文中我们涵盖的想法来满足您自己的需求，并与Mermaid一起在其余的Markdown上方便地实施图表。 “图表 - 代码”是一个术语吗？应该是。
例如，假设您正在研究一种精美的新产品，并且想以甘特图（或其他类型的其他类型（例如流程图，序列和班级图））的形式提供路线图。使用美人鱼，您可以用少数几行进行操作：
甘特 标题我的产品路线图 dateformat yyyy-mm-dd 部分酷功能 任务：A1，2022-02-25，30d 另一个任务：A1，20d之后 section rad功能 序列任务：2022-03-04，12D 任务，第2：24D
这将呈现出一个不错的SVG图：
专家提示：美人鱼有一位现场编辑器，可以让您在Mermaid.live的承诺中尝试一下。
降价中的美人鱼图
美人鱼与Markdown相处得很好，因为它仅使用美人鱼语法集，它只是另一个围栏代码块。例如，这个代码块：
``美人鱼
图TD;
a-> b;
a-> c;
B-> D;
C-> D;
````````
…生成一个HTML
元素，内部具有代码块内容：<pre rel="HTML" data-line=""> <pre class="brush:php;toolbar:false"> <code>图形TD;
a-> b;
a-> c;
B-> D;
c-> d; </code> 如果您使用的是与CommonMark Spec一致的Markdown处理器，则它将非常类似于：
<pre class="brush:php;toolbar:false"> <code>图形TD;
a-> b;
a-> c;
B-> D;
C-> D;
</code> 查看演示美人鱼API的默认行为期望直接包含内容的
或<span>（例如来自语法荧光笔的），您可能会在从Markdown到HTML的转换中看到。<h3>与JavaScript进行技巧</h3>
<p>有了一点JavaScript，可以将Markdown生成的HTML置于美人鱼目标的</p>
<div>标签中，这是合理的。值得注意的是，$ element.textcontent在这里有目的：Markdown将为Mermaid使用的html andsode特定字符（例如> in> in＆gt;）。它还滤除了<pre class="brush:php;toolbar:false">元素后代的任何错误的HTML元素。<pre rel="JavaScript" data-line=""> //选择<pre class="brush:php;toolbar:false"> _and_ <pre class="brush:php;toolbar:false"> <code>
document.queryselectorall（“ pre.Mermaid，pre> code.language-mermaid”）。foreach（$ el => {
//如果第二个选择器受到打击，请参考父<pre class="brush:php;toolbar:false">
如果（$ el.tagname ===“代码”）
$ el = $ el.parentelement
//将美人鱼内容放在预期的<div>中
// Plus将原始内容保留在一个不错的中
$ el.outerhtml =`
<div> $ {$ el.textContent} </div>
<summary>图来源</summary>
<pre class="brush:php;toolbar:false"> $ {$ el.textContent} </pre>
详细信息>
`
}））<p>现在，我们的HTML已适当地形成，让我们实施美人鱼进行渲染。</p>
<h3>使用美人鱼</h3>
<p>美人鱼作为NPM软件包出版，因此您可以使用包含包的CDN（例如UNPKG）来获取副本。您需要使用缩小代码（例如Mermaid.min.js），而不是Mermaid.core.js的默认导出。例如：</p>
<pre rel="HTML" data-line=""> <script src="%E2%80%9C" https: protected> </script></pre>
<p>美人鱼<em>也</em>准备好ESM，因此您也可以使用Skypack加载它：</p>
<pre rel="HTML" data-line="">
从“ https://cdn.skypack.dev/ [email Protected]中导入美人鱼”；
</pre>
<p>如果您想保持简单，可以停在这里。默认情况下，美人鱼将在文档准备就绪时自动化自身。只要您使用前面提到的JavaScript进行降级到HTML的技巧 - 在加载美人鱼<em>之前</em>，您将全部设置。</p>
<p>但是，美人鱼有几个值得配置的设置：</p>
<pre rel="JavaScript" data-line=""> //将美人鱼初始化为[1]日志错误，[2]对第一方的安全性松动
//撰写的图表，[3]尊重首选的深色方案
mermaid.initialize（{
loglevel：“错误”，// [1]
SecurityLevel：“松散”，// [2]
主题：（ window.matchmedia && window.matchmedia（“（“ prefers-color-scheme：dark）”）。匹配）？
“黑暗的” ：
“默认” // [3]
}））</pre>
<ol>
<li> Loglevel将使您对可能出现的任何错误有更多的可见性。如果您想查看更多信息，则可以选择更多的详细级别（反之亦然）。</li>
<li> SecurityLevel与图源的信任程度有关。如果您的内容是<em>您</em>所撰写的，那么“松散”就可以了。如果是用户生成的内容，最好将“严格”默认设置为位。</li>
<li>主题改变了渲染图的样式。通过查询优选的配色方案并利用三元运营商，我们可以在适当的情况下指定“黑暗”。</li>
</ol>
<h3>现在在一起！</h3>
<p>以下是Markdown中的几个美人鱼图示例：</p>
<h3>更深的水</h3>
<p>该策略特别有效，因为它是<em>进步的</em>：如果禁用JavaScript，则将显示原始的美人鱼源。不犯规。</p>
<p>还有一个完整的美人鱼命令线接口，如果您在探索方面有趣，则可能会利用显示完全服务器端渲染的图表。在美人鱼CLI和在线生成器之间，甚至可以将用于生成图表快照的任何构建过程挂钩，并将其显示为<img alt="在降价中制作美人鱼图" > sholdback而不是源代码。</p>
<p>希望，随着美人鱼继续流行，我们会看到更多这样的本地美人鱼一体化。毫无疑问，将视觉图表和图表放在文档旁边的有用性 - 从产品路线图到决策树以及介于两者之间的所有内容。那是很难单独记录的信息。</p>
<p>美人鱼图表解决了这一点，并以确保可以与文档其余部分一起管理和维护信息的方式。</p>
</div></pre>
以上是在降价中制作美人鱼图的详细内容。更多信息请关注PHP中文网其他相关文章！