Notion 的使用者們，在先前的教學中，我們已經分享了如何在 Notion 中使用 Mermaid 語法繪製基本的流程圖。有趣的是，Mermaid 語法還有許多進階功能等待我們去探索。在本文中，我們將提供三種 Mermaid 語法在流程圖的進階應用，包括超連結、粗體線以及內容換行。讓我們一起來看看吧！
超連結
在 Mermaid 語法中，我們可以輕鬆地為流程圖中的節點添加超連結，使得我們的流程圖更具互動性和實用性。要添加超連結，我們只需在流程圖語法的下方後「click O “超連結”，並在超連結處輸入對應的超連結 ，如下所示：
這將在流程圖中創建一個連接到外部的超連結。當使用者點擊畫面的區塊時，將自動跳轉至指定的網頁。所有區塊包含 窩DEMAA官網、首頁、數位指南、生活體驗、美食導航、書籍分享，以及關於我們。當然，如果你希望頁面是以新分頁開啟，只需要在超連結的後方，再輸入「_blank」就可以達成。
粗體線
在某些情況下，我們可能希望突顯出流程圖中的某些連線，以提高其重要性或可讀性。這時，我們就會使用粗體線功能。要創建一條粗體線，我們只需在連線描述中，將原先預設為一般線條的- -> 輸入，更換為 ==> 的 Mermaid 語法輸入，如下所示：
這將使得從節點 A(窩DEMAA官網) 到節點 B(首頁)，以及節點 G(關於我們)的連線標示為粗體，將能更加突顯出差異性。
內容換行
流程圖中，有時我們的節點內容會很長，需要透過內容換行的方式，來保持流程圖的整潔和清晰。在 Mermaid 語法中，我們可以使用換行的程式碼 <br> 來實現節點內容的換行，如下所示：
由於我們預計在「窩DEMAA」以及「官網」兩個詞彙間進行換行，因此我們便在兩者之間輸入<br>。故在呈現上，我們會在節點 A(窩DEMAA官網) 的內容中看見「官網」呈現在節點的第二行，使得節點更易於閱讀。
這就是今天所要分享的進階應用了，這些功能使得我們的流程圖多了些運用性，更符合我們的實際需求。快不妨在你的 Notion 中試試這些功能，讓你的流程圖更加專業和實用吧！如果想在 Notion 中直接看本篇的 code，可以 點此 看本篇實際操作的 code。如果想知道更多流程圖中 Mermaid 語法的進階運用，留言告訴我們。我們下次見！
發佈留言