在降價中製作美人魚圖

美人魚圖和流程圖一直在引起關注，尤其是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 id="與JavaScript進行技巧">與JavaScript進行技巧</h3> <p>有了一點JavaScript，可以將Markdown生成的HTML置於美人魚目標的</p> <div>標籤中，這是合理的。值得注意的是，$ element.textcontent在這裡有目的：Markdown將為Mermaid使用的html andsode特定字符（例如> in> in＆gt;）。它還濾除了<pre class="brush:php;toolbar:false">元素後代的任何錯誤的HTML元素。&lt;pre rel=&quot;JavaScript&quot; data-line=&quot;&quot;&gt; //選擇&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; _and_ &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; &lt;code&gt; document.queryselectorall（“ pre.Mermaid，pre&gt; code.language-mermaid”）。foreach（$ el =&gt; { //如果第二個選擇器受到打擊，請參考父&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; 如果（$ el.tagname ===“代碼”） $ el = $ el.parentelement //將美人魚內容放在預期的&lt;div&gt;中 // Plus將原始內容保留在一個不錯的中 $ el.outerhtml =` &lt;div&gt; $ {$ el.textContent} &lt;/div&gt; &lt;summary&gt;圖來源&lt;/summary&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; $ {$ el.textContent} </pre> 詳細信息> ` }））<p>現在，我們的HTML已適當地形成，讓我們實施美人魚進行渲染。</p> <h3 id="使用美人魚">使用美人魚</h3> <p>美人魚作為NPM軟件包出版，因此您可以使用包含包的CDN（例如UNPKG）來獲取副本。您需要使用縮小代碼（例如Mermaid.min.js），而不是Mermaid.core.js的默認導出。例如：</p> <pre rel="HTML" data-line=""> &lt;script src=&quot;%E2%80%9C&quot; https: protected&gt; &lt;/script&gt;</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 &amp;&amp; window.matchmedia（“（“ prefers-color-scheme：dark）”）。匹配）？ “黑暗的” ： “默認” // [3] }））</pre> <ol> <li> Loglevel將使您對可能出現的任何錯誤有更多的可見性。如果您想查看更多信息，則可以選擇更多的詳細級別（反之亦然）。</li> <li> SecurityLevel與圖源的信任程度有關。如果您的內容是<em>您</em>所撰寫的，那麼“鬆散”就可以了。如果是用戶生成的內容，最好將“嚴格”默認設置為位。</li> <li>主題改變了渲染圖的樣式。通過查詢優選的配色方案並利用三元運營商，我們可以在適當的情況下指定“黑暗”。</li> </ol> <h3 id="現在在一起">現在在一起！</h3> <p>以下是Markdown中的幾個美人魚圖示例：</p> <h3 id="更深的水">更深的水</h3> <p>該策略特別有效，因為它是<em>進步的</em>：如果禁用JavaScript，則將顯示原始的美人魚源。不犯規。</p> <p>還有一個完整的美人魚命令線接口，如果您在探索方面有趣，則可能會利用顯示完全服務器端渲染的圖表。在美人魚CLI和在線生成器之間，甚至可以將用於生成圖表快照的任何構建過程掛鉤，並將其顯示為<img alt="在降價中製作美人魚圖" > sholdback而不是源代碼。</p> <p>希望，隨著美人魚繼續流行，我們會看到更多這樣的本地美人魚一體化。毫無疑問，將視覺圖表和圖表放在文檔旁邊的有用性 - 從產品路線圖到決策樹以及介於兩者之間的所有內容。那是很難單獨記錄的信息。</p> <p>美人魚圖表解決了這一點，並以確保可以與文檔其餘部分一起管理和維護信息的方式。</p> </div></pre>