美人魚圖和流程圖一直在引起關注，尤其是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;）。它還濾除了<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">登入後複製</div></div>
詳細信息>
`
}））<p>現在，我們的HTML已適當地形成，讓我們實施美人魚進行渲染。</p>
<h3>使用美人魚</h3>
<p>美人魚作為NPM軟件包出版，因此您可以使用包含包的CDN（例如UNPKG）來獲取副本。您需要使用縮小代碼（例如Mermaid.min.js），而不是Mermaid.core.js的默認導出。例如：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="HTML" data-line=""> <script src="%E2%80%9C" https: protected> </script></pre><div class="contentsignin">登入後複製</div></div>
<p>美人魚<em>也</em>準備好ESM，因此您也可以使用Skypack加載它：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="HTML" data-line="">
從“ https://cdn.skypack.dev/ [email Protected]中導入美人魚”；
</pre><div class="contentsignin">登入後複製</div></div>
<p>如果您想保持簡單，可以停在這裡。默認情況下，美人魚將在文檔準備就緒時自動化自身。只要您使用前面提到的JavaScript進行降級到HTML的技巧 - 在加載美人魚<em>之前</em>，您將全部設置。</p>
<p>但是，美人魚有幾個值得配置的設置：</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre rel="JavaScript" data-line=""> //將美人魚初始化為[1]日誌錯誤，[2]對第一方的安全性鬆動
//撰寫的圖表，[3]尊重首選的深色方案
mermaid.initialize（{
loglevel：“錯誤”，// [1]
SecurityLevel：“鬆散”，// [2]
主題：（ window.matchmedia && window.matchmedia（“（“ prefers-color-scheme：dark）”）。匹配）？
“黑暗的” ：
“默認” // [3]
}））</pre><div class="contentsignin">登入後複製</div></div>
<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中文網其他相關文章！
