用文字就能畫圖!Mermaid 快速生成各種圖表,心智圖、流程圖、甘特圖...

更新 發佈閱讀 5 分鐘

工具網址:https://www.mermaidchart.com/

Mermaid 是一個基於文字的圖表繪製工具,Knut Sveidqvist 在 2016 年創立的。採用 JavaScript 實作,能在瀏覽器環境直接渲染圖形。Mermaid 語法是一種輕量級的標記語言,讓使用者用簡單的文字語法就能生成各種圖表,特別適合在文件、筆記、Wiki、GitHub 或程式碼專案中能夠快速嵌入流程圖、時序圖、甘特圖等可視化內容,方便地與程式碼版本一起管理和協作。

在首頁選擇 Playground 就能免註冊免費使用,但可下載svg檔,無法下載png檔。免費用戶可以同存在三個檔案,超過無法建立新檔案,需要先刪除舊檔案,就能繼續免費使用。

raw-image

跨平台支援:

  • GitHub / GitLab 的 Markdown 原生支援
  • Notion、Obsidian、VS Code 等都能安裝外掛直接渲染
  • 可在瀏覽器直接用 Mermaid Live Editor 預覽

使用場景:

  • 產品經理:用流程圖描述使用者路徑、可視化程式之間關係,方便與團隊討論。
  • 工程師:編寫技術文件README.md、專案文件可有可視化的架構。
  • 設計師:用甘特圖安排設計進度、心智圖創意發想。
  • 學生 / 教師:課堂筆記與知識整理。

使用步驟:

步驟一:可以藉由各種大型語言模型(LLM)來對話方式生成或將現有資料轉換成 mermaid 程式碼。

Prompt:根據 Gemini Storybook 功能使用流程 畫出 在 Mermaid 上使用的flowchart code,並預想可能失敗或未登入的狀態。

可以藉由各種大型語言模型來生成流程圖 mermaid code

可以藉由各種大型語言模型來生成流程圖 mermaid code

步驟二: 選擇想要的圖表 ( diagram ),目前提供20種不同類型,像是流程圖(Flowchart)、時序圖(Sequence Diagram)、甘特圖(Gantt Chart)、狀態圖(State Diagram)、用例圖(User Journey)、 Git 分支圖(Git Graph)、 思維導圖(Mindmap)等...

raw-image

步驟三:將 mermaid 程式碼直接貼到左側 Edit Code 裡面。右側就會出現圖表視覺。

raw-image

步驟四:可進一步用中文使用 「Use AI 」來修改或新增圖表。但免費只能使用三次。建議在原本在大型語言模型(LLM)用對話方式調整好。

raw-image

步驟五:有內建一些圖示,可連結其他額外的線上 Svg 檔,最後可輸出 Export 為 png 檔、svg檔、Mermaid 自家的 mmg。

raw-image

其他運用

顧客旅程地圖較為陽春,只有顧客情緒與流程的可視化,而不是完整的服務藍圖。

raw-image

運用於 VS Code:

VS Code 可安裝 Mermaid Plugin 插件來呈現圖表。或是藉由 Markdown Preview Enhanced 插件,使用時程式碼的外層需加上三個反引號(```)後面一定要加 `mermaid` 才會解析成圖表。

安裝 Mermaid Plugin 插件來呈現圖表

安裝 Mermaid Plugin 插件來呈現圖表

安裝 Markdown Preview Enhanced 插件來呈現圖表

安裝 Markdown Preview Enhanced 插件來呈現圖表

運用於 Whimsical:

目前 Whimsical 基本上不支援匯入或使用 Mermaid ,但直接在空白處貼上 flowchart TD 的 Mermaid code,仍然可轉換圖表。

raw-image

運用於 Notion:

例如用 sequenceDiagram 來製作團隊工作協作流程,可直接將 Mermaid Code 貼上 Notion 數位筆記上,程式碼選為 Mermaid 並且換成預覽就可呈現。

raw-image
raw-image

總結

Mermaid 介面簡潔易操作,能透過 markdown 純文字語法快速生成多種圖表,方便在文件、筆記和專案中嵌入可視化內容。無論是 GitHub、Notion 或 VS Code 都能輕鬆整合。對於需要再開發文件上做圖表溝通,極為方便。雖然網頁上免費用戶有檔案數量限制,可將 Code 存在其他地方。不超過三個即可仍可免費使用。但整體操作可藉由語言模型來生成。運用在更多樣化且複雜的圖表,呈現上較不夠完整。


留言
avatar-img
留言分享你的想法!
avatar-img
林位青的沙龍
33會員
51內容數
林位青的沙龍的其他內容
2025/08/06
Gemini 推出 Storybook 功能,可根據提示詞生成圖文故事書,支援多種風格和語言,並可朗讀。此工具不僅能生成故事,代表 AI 應用更具個人化創作與參與式體驗。Storybook 可用於個人回憶創作、協助兒童理解複雜概念、親子共讀等。商業品牌亦可藉此進行品牌敘事式行銷,創造專屬故事。
Thumbnail
2025/08/06
Gemini 推出 Storybook 功能,可根據提示詞生成圖文故事書,支援多種風格和語言,並可朗讀。此工具不僅能生成故事,代表 AI 應用更具個人化創作與參與式體驗。Storybook 可用於個人回憶創作、協助兒童理解複雜概念、親子共讀等。商業品牌亦可藉此進行品牌敘事式行銷,創造專屬故事。
Thumbnail
2025/08/03
Napkin AI 是一款AI圖像生成工具,能將文字自動轉換成流程圖、甘特圖或心智圖等視覺化圖表,方便使用者快速掌握重點,提升資訊理解效率。本文介紹Napkin AI 的功能、使用方法及優缺點,並針對其在中文環境下的使用體驗提供建議。
Thumbnail
2025/08/03
Napkin AI 是一款AI圖像生成工具,能將文字自動轉換成流程圖、甘特圖或心智圖等視覺化圖表,方便使用者快速掌握重點,提升資訊理解效率。本文介紹Napkin AI 的功能、使用方法及優缺點,並針對其在中文環境下的使用體驗提供建議。
Thumbnail
2025/07/28
Atter App 是一款免費、功能全面且無廣告的語音轉文字工具,支援各種匯入方式,包含手機錄音、相簿影片、Apple Watch 錄音等,提供逐字稿、翻譯、摘要、重點章節、AI 問答等功能。雖然在辨識精準度上仍有進步空間,但對於需要經常處理訪談、會議或課程紀錄者而言,是一款非常實用且友善的工具。
Thumbnail
2025/07/28
Atter App 是一款免費、功能全面且無廣告的語音轉文字工具,支援各種匯入方式,包含手機錄音、相簿影片、Apple Watch 錄音等,提供逐字稿、翻譯、摘要、重點章節、AI 問答等功能。雖然在辨識精準度上仍有進步空間,但對於需要經常處理訪談、會議或課程紀錄者而言,是一款非常實用且友善的工具。
Thumbnail
看更多
你可能也想看
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
目前使用ideogram,免費的額度一天 10 slow prompts,然後需要等待幾十秒到一分多鐘的時間產圖。產出來的圖片還不錯,免費方案的也有幾款風格可以選擇,但產出的圖片只能下載非最高畫質的JPEG檔。
Thumbnail
目前使用ideogram,免費的額度一天 10 slow prompts,然後需要等待幾十秒到一分多鐘的時間產圖。產出來的圖片還不錯,免費方案的也有幾款風格可以選擇,但產出的圖片只能下載非最高畫質的JPEG檔。
Thumbnail
選擇一款適合自己的繪圖軟體是開始電繪的重要步驟。以下是幾款流行的數位繪圖軟體
Thumbnail
選擇一款適合自己的繪圖軟體是開始電繪的重要步驟。以下是幾款流行的數位繪圖軟體
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
想製作看起來專業又精美的圖表嗎?面對一堆數據卻不知該如何報告嗎? Graphy絕對能滿足你的需求! Graphy是一個提供圖表製作、數據分析等功能的AI工具,讓使用者能夠快速創建和分享數據視覺化的內容,使報告製作變得更加高效、易於理解,無需複雜的整合或廣泛的學習。
Thumbnail
想製作看起來專業又精美的圖表嗎?面對一堆數據卻不知該如何報告嗎? Graphy絕對能滿足你的需求! Graphy是一個提供圖表製作、數據分析等功能的AI工具,讓使用者能夠快速創建和分享數據視覺化的內容,使報告製作變得更加高效、易於理解,無需複雜的整合或廣泛的學習。
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
這篇要搭建一個同時生成寫實照片跟動漫風格圖片的工作流,還可以幫線稿上色。
Thumbnail
這篇文章精選了三款必備的AI繪圖工具,包括MidJourney、DALL·E和Stable Diffusion。這些工具提供了豐富的創作可能性,讓使用者能夠輕鬆地以AI技術創作各種繪畫作品。
Thumbnail
這篇文章精選了三款必備的AI繪圖工具,包括MidJourney、DALL·E和Stable Diffusion。這些工具提供了豐富的創作可能性,讓使用者能夠輕鬆地以AI技術創作各種繪畫作品。
Thumbnail
AI圖形工具 今天分享一些常用的AI圖形工具。現在的圖形工具非常多,不可能全部都熟悉,因為真的太多了。所以介紹幾個比較常用的工具來供參考。算是我工作室的員工。 取代部分繪圖的工作 AI圖形工具基本上可以取代一部分繪圖的工作。就像速寫一樣,本身長年在畫速寫,但再怎麼說速度也不會比AI生成圖片來得
Thumbnail
AI圖形工具 今天分享一些常用的AI圖形工具。現在的圖形工具非常多,不可能全部都熟悉,因為真的太多了。所以介紹幾個比較常用的工具來供參考。算是我工作室的員工。 取代部分繪圖的工作 AI圖形工具基本上可以取代一部分繪圖的工作。就像速寫一樣,本身長年在畫速寫,但再怎麼說速度也不會比AI生成圖片來得
Thumbnail
流程圖是流程中各個步驟的直覺表示,在我們的工作生活中都能用到流程圖。如果你是新手,想要學習如何繪製流程圖,那麽不妨看看下面的5個流程圖範例,包括泳道圖、樹狀圖、組織圖等,快速幫你熟悉流程圖。  
Thumbnail
流程圖是流程中各個步驟的直覺表示,在我們的工作生活中都能用到流程圖。如果你是新手,想要學習如何繪製流程圖,那麽不妨看看下面的5個流程圖範例,包括泳道圖、樹狀圖、組織圖等,快速幫你熟悉流程圖。  
Thumbnail
資訊豐富的時代,資料呈現的方式變得愈發重要。先前我們已經分享了如何在 Notion 上使用 Mermaid 語法創建圓餅圖、時間軸、甘特圖、心智圖、流程圖和旅程圖。而在今天的文章中,我將帶你瞭解如何讓這些視覺圖表變得豐富多彩,讓你的資料不再是單調的黑白兩色。顏色主題共五種,讓我們繼續看下去!
Thumbnail
資訊豐富的時代,資料呈現的方式變得愈發重要。先前我們已經分享了如何在 Notion 上使用 Mermaid 語法創建圓餅圖、時間軸、甘特圖、心智圖、流程圖和旅程圖。而在今天的文章中,我將帶你瞭解如何讓這些視覺圖表變得豐富多彩,讓你的資料不再是單調的黑白兩色。顏色主題共五種,讓我們繼續看下去!
Thumbnail
Notion 是一個功能強大且多功能的協作工具。透過在 Notion 上使用 Mermaid 語法繪製旅程圖,我們能夠以直觀且視覺化的方式呈現使用者的旅程和體驗。旅程圖是一種圖形表示方式,它能夠幫助我們更有效地瞭解使用者在整個旅程中的體驗和感受,從而有助於我們優化未來的任務和計劃。
Thumbnail
Notion 是一個功能強大且多功能的協作工具。透過在 Notion 上使用 Mermaid 語法繪製旅程圖,我們能夠以直觀且視覺化的方式呈現使用者的旅程和體驗。旅程圖是一種圖形表示方式,它能夠幫助我們更有效地瞭解使用者在整個旅程中的體驗和感受,從而有助於我們優化未來的任務和計劃。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News