SciFig
免費開始使用

免費 Mermaid 轉 PNG 工具

貼上 Mermaid 程式碼，在瀏覽器中繪製圖表，再下載 PNG 或 SVG。完整保留文字、箭頭與群組，分享圖表時不用開啟程式碼編輯器。

請先在上方輸入框裡描述你要的內容。

獲得 最高 150 免費點數|無需信用卡

透過邀請連結加入，首日最高可得 350 免費點數。

3 大出圖引擎 · 500+ 範本標註全部可編輯 · 60+ 套配色方案可編輯 PPTX · 分層 SVG · 8K PNG / JPG

免費 Mermaid 轉 PNG 工具— 範本與範例

更新於

Mermaid 圖表工具

免費 Mermaid 轉 PNG 工具

將圖表程式碼轉為清晰圖片，自選背景與匯出倍率。

Mermaid 轉 PNG 會將文字形式的圖表程式碼轉為點陣圖片，方便放入文件與簡報。 貼上 Mermaid 程式碼，在瀏覽器中繪製圖表，再下載 PNG 或 SVG。完整保留文字、箭頭與群組，分享圖表時不用開啟程式碼編輯器。

製作 Mermaid 圖表
Mermaid 流程圖：由研究問題依序連結實驗、分析與科研圖
  • 貼上圖表程式碼
  • 選擇匯出倍率
  • 使用透明背景
  • 匯出繪製後的 SVG

Mermaid 圖表功能

將圖表程式碼轉為清晰圖片，自選背景與匯出倍率。

依 Mermaid 程式碼繪製圖表

從現有圖表原始碼開始，SciFig 將節點、關係與標籤繪製成預覽。圖片依程式碼產生，保留原始碼定義的結構。使用流程圖、循序圖或類別圖，將文字形式的說明轉為文件配圖。

  • 貼上圖表程式碼
  • 預覽連接的節點與標籤
  • 保留子圖與關係
繪製 Mermaid 程式碼

匯出清晰的 PNG 圖片

依文件或投影片的展示尺寸選擇匯出倍率，讓標籤更清楚。PNG 適用於能插入圖片、卻無法執行 Mermaid 的場合。圖表結構與文字一併儲存，分享給協作者時也能完整呈現原意。

  • 選擇匯出倍率
  • 保留完整圖表範圍
  • 在簡報中使用點陣圖片
準備 PNG 圖片

選擇適合圖表的背景

透明背景適合疊放在有底色的投影片上，白色背景則讓圖片自成一體。依使用位置選擇背景，SciFig 會將設定套用至匯出圖片，保留相同的圖表結構與內容。

  • 使用透明背景
  • 選擇白色背景
  • 將結果放入簡報
設定背景

同時保留向量版本

需要可縮放的圖表時，下載 SVG 以向量格式保留線條與文字；日常文件也可使用 PNG。兩種輸出都來自繪製後的 Mermaid 原始碼，方便一併保存可分享的圖片與產生它的程式碼。

  • 匯出繪製後的 SVG
  • 保留向量線條
  • 一併保存原始碼與結果
匯出 Mermaid 圖表

如何製作圖表

使用頁面內工具準備 Mermaid 圖表並下載結果。

  1. 貼上 Mermaid 原始碼

    在轉換器中貼上圖表程式碼，從支援的流程圖、循序圖或類別圖開始。將成品需要的標籤與關係寫入原始碼，這些敘述會決定繪製後的結構。

  2. 產生圖表

    執行預覽，查看原始碼中的節點、群組、連線與標示如何組成圖形。若程式碼有語法錯誤，檢查畫面提示及對應敘述，修正後重新產生圖表。確認需要的流程關係與文字完整顯示，再選擇後續匯出設定。

  3. 選擇背景與倍率

    依圖片用途設定背景與匯出倍率。透明背景適合有底色的投影片，白色背景讓圖片自成一體。提高 PNG 倍率可在維持比例的同時增加標籤可用的像素。

  4. 下載 PNG 或 SVG

    為簡報、報告或文件下載 PNG，需要向量版本時選擇 SVG。將 Mermaid 原始碼與匯出檔案一起保存，以後修改結構時可以從原始程式碼繼續。

Mermaid 圖表用途

將材料中的說明轉為帶標籤的 Mermaid 圖表，讓讀者直接看懂關係。

Mermaid 流程圖：由研究問題依序連結實驗、分析與科研圖

在報告中加入工作流程

方法報告中可能已有以 Mermaid 撰寫的流程程式碼。將原始碼轉為 PNG，讀者不必開啟程式碼編輯器就能看懂決策節點。將圖表與文件一併保存，流程改變時重新產生。

查看此示例
Mermaid 時序圖：研究者加入原始碼、預覽圖形並匯出 PNG

與協作者分享循序圖

使用循序圖說明每則訊息由誰發送。繪製程式碼後匯出完整互動，供團隊討論。靜態圖片能直接放入簡報或會議文件，不必整合 Mermaid。

查看此示例
Mermaid 類別圖：Experiment 與 Figure 類別及其欄位、方法和連結

記錄類別關係

技術附錄可能需要一張類別圖，而非程式碼截圖。使用 Mermaid 繪製關係、標籤與類別區塊，再匯出可縮放的 SVG，或方便插入文件的 PNG。

查看此示例
Mermaid 流程圖：原始碼、透明 PNG 步驟與投影片背景的連結

讓圖表配合投影片

將透明 PNG 疊放在投影片背景上，保留圖表標籤與箭頭。圖表佔據大部分頁面時，可以提高匯出倍率。若要調整結構，修改原始碼後再產生圖片即可。

查看此示例
Mermaid 工作流程：樣本準備子圖連接反應量測與實驗條件比較

說明分組階段

子圖可在大型工作流程中整理相關階段。匯出時保留群組邊界與完整標籤，讓讀者區分局部步驟與整體流程，適合涉及多個團隊的程序說明。

查看此示例
Mermaid 流程圖：由研究問題依序連結實驗、分析與科研圖

保留方便分享的專案配圖

在專案資料夾中一併保存 Mermaid 原始碼、PNG 與 SVG。圖片方便日常分享，原始碼則精簡記錄各項關係。若需從文字說明建立新的流程圖，可使用 SciFig FlowChart。

查看此示例

研究者如何使用 SciFig

我們的方法文件裡有一段工作流程，一直保存在 Mermaid 檔案中。我將 Mermaid 轉 PNG，把相同的判斷節點放進報告，不必再用其他編輯器重畫。原始碼與匯出圖片一起保存後，團隊也清楚知道，日後實驗流程更動時應從哪裡修改。

Lena W.

劍橋大學｜研究軟體工程師

免費工具

依研究任務選擇繪圖工具

120 個科研繪圖工具入口，涵蓋插圖、圖表與流程圖。依研究任務選擇工具，再用自己的素材製作圖件。

插圖、結構示意與概念圖

60 個工具
化學結構繪圖工具 範例圖化學結構繪圖工具圖形摘要製作工具 範例圖圖形摘要製作工具受力圖繪圖工具 範例圖受力圖繪圖工具電路圖繪圖工具 範例圖電路圖繪圖工具AI 研究影像產生器 範例圖AI 研究影像產生器English可編輯 96 孔盤範本 範例圖可編輯 96 孔盤範本English路易斯結構式產生器 範例圖路易斯結構式產生器DNA結構圖產生器 範例圖DNA結構圖產生器English接線圖繪製工具 範例圖接線圖繪製工具管線儀表圖工具 範例圖管線儀表圖工具學術海報產生器 範例圖學術海報產生器English支序圖製作器 範例圖支序圖製作器English食物網圖製作器 範例圖食物網圖製作器醫學插圖產生器 範例圖醫學插圖產生器PCR 示意圖產生器 範例圖PCR 示意圖產生器EnglishPPT 文字轉圖示工具 範例圖PPT 文字轉圖示工具English有絲分裂圖產生器 範例圖有絲分裂圖產生器EnglishAI 資訊圖產生器 範例圖AI 資訊圖產生器English解剖圖產生器 範例圖解剖圖產生器English動植物細胞對比 範例圖動植物細胞對比English動物細胞圖產生器 範例圖動物細胞圖產生器English抗體結構圖 範例圖抗體結構圖English細胞凋亡示意圖 範例圖細胞凋亡示意圖細菌構造圖產生器 範例圖細菌構造圖產生器English建築藍圖製作器 範例圖建築藍圖製作器English玻爾模型製作器 範例圖玻爾模型製作器English卡爾文循環圖產生器 範例圖卡爾文循環圖產生器English碳循環圖產生器 範例圖碳循環圖產生器English細胞週期圖產生器 範例圖細胞週期圖產生器English細胞呼吸圖產生器 範例圖細胞呼吸圖產生器English補體系統示意圖 範例圖補體系統示意圖CRISPR-Cas9 示意圖 範例圖CRISPR-Cas9 示意圖EnglishDNA 複製圖產生器 範例圖DNA 複製圖產生器English電子組態圖產生器 範例圖電子組態圖產生器English電子傳遞鏈圖產生器 範例圖電子傳遞鏈圖產生器English基因調控圖 範例圖基因調控圖糖酵解圖產生器 範例圖糖酵解圖產生器English圖片轉可編輯 SVG 範例圖圖片轉可編輯 SVG免疫反應示意圖 範例圖免疫反應示意圖English檸檬酸循環圖產生器 範例圖檸檬酸循環圖產生器English實驗裝置圖製作器 範例圖實驗裝置圖製作器English減數分裂圖產生器 範例圖減數分裂圖產生器English分子軌域圖產生器 範例圖分子軌域圖產生器English氮循環圖產生器 範例圖氮循環圖產生器English家系圖製作器 範例圖家系圖製作器English磷脂結構圖產生器 範例圖磷脂結構圖產生器English磷循環圖產生器 範例圖磷循環圖產生器English光合作用圖產生器 範例圖光合作用圖產生器English系統發育樹製作器 範例圖系統發育樹製作器English物理向量圖繪製工具 範例圖物理向量圖繪製工具English植物細胞圖產生器 範例圖植物細胞圖產生器English蛋白質合成圖產生器 範例圖蛋白質合成圖產生器English龐納特方格製作器 範例圖龐納特方格製作器English光路圖製作器 範例圖光路圖製作器English研究配色產生器 範例圖研究配色產生器訊息傳遞途徑圖 範例圖訊息傳遞途徑圖English電氣單線圖產生器 範例圖電氣單線圖產生器T 細胞活化示意圖 範例圖T 細胞活化示意圖English水循環圖產生器 範例圖水循環圖產生器EnglishWestern blot 示意圖產生器 範例圖Western blot 示意圖產生器English

圖表與曲線工具

28 個工具
伯德圖產生器 範例圖伯德圖產生器蜘蛛網圖製作器 範例圖蜘蛛網圖製作器EnglishKaplan-Meier 存活曲線 範例圖Kaplan-Meier 存活曲線English多層圓餅圖製作器 範例圖多層圓餅圖製作器English鐘形曲線產生器 範例圖鐘形曲線產生器甘特圖產生器 範例圖甘特圖產生器English盒鬚圖產生器 範例圖盒鬚圖產生器English森林圖製作 範例圖森林圖製作火山圖產生器 範例圖火山圖產生器English柏拉圖產生器 範例圖柏拉圖產生器散佈圖製作器 範例圖散佈圖製作器English熱圖產生器 範例圖熱圖產生器EnglishAI 圖表產生器 範例圖AI 圖表產生器English對比圖製作器 範例圖對比圖製作器English桑基圖產生器 範例圖桑基圖產生器English雷達圖產生器 範例圖雷達圖產生器直方圖製作器 範例圖直方圖製作器English長條圖製作 範例圖長條圖製作座標平面產生器 範例圖座標平面產生器English點圖產生器 範例圖點圖產生器EnglishIC50 計算與劑量反應曲線 範例圖IC50 計算與劑量反應曲線圖片DPI計算器 範例圖圖片DPI計算器橫波圖產生器 範例圖橫波圖產生器English折線圖製作 範例圖折線圖製作數線產生器 範例圖數線產生器圖片出版檢查 範例圖圖片出版檢查供需曲線產生器 範例圖供需曲線產生器English瀑布圖製作 範例圖瀑布圖製作

流程圖、框架圖與結構圖

32 個工具
概念框架產生器 範例圖概念框架產生器English理論框架產生器 範例圖理論框架產生器English句法樹產生器 範例圖句法樹產生器二歧檢索表製作工具 範例圖二歧檢索表製作工具English句子圖解產生器 範例圖句子圖解產生器English文字轉示意圖產生器 範例圖文字轉示意圖產生器EnglishPRISMA 流程圖製作工具 範例圖PRISMA 流程圖製作工具工作流程圖產生器 範例圖工作流程圖產生器English時間軸產生器 範例圖時間軸產生器文獻綜合矩陣產生器 範例圖文獻綜合矩陣產生器EnglishER 圖產生器 範例圖ER 圖產生器EnglishUML 圖產生器 範例圖UML 圖產生器English樹形圖產生器 範例圖樹形圖產生器English魚骨圖產生器 範例圖魚骨圖產生器English神經網路圖產生器 範例圖神經網路圖產生器English決策樹產生器 範例圖決策樹產生器English軟體架構圖產生器 範例圖軟體架構圖產生器EnglishCONSORT 納入流程圖產生器 範例圖CONSORT 納入流程圖產生器English系統脈絡圖製作工具 範例圖系統脈絡圖製作工具English資料流圖產生器 範例圖資料流圖產生器English實驗流程圖製作 範例圖實驗流程圖製作English家族關係圖產生器 範例圖家族關係圖產生器圖形組織圖產生器 範例圖圖形組織圖產生器圖片轉流程圖 範例圖圖片轉流程圖Mermaid 轉 PNG 範例圖Mermaid 轉 PNG網路拓樸圖產生器 範例圖網路拓樸圖產生器English組織結構圖製作器 範例圖組織結構圖製作器English時序圖產生器 範例圖時序圖產生器English狀態圖產生器 範例圖狀態圖產生器English泳道圖產生器 範例圖泳道圖產生器English用例圖產生器 範例圖用例圖產生器English維恩圖產生器 範例圖維恩圖產生器
瀏覽全部工具 →

Mermaid 圖表常見問題

1.

2.

3.

4.

5.

6.

行動號召背景

Mermaid 圖表

製作 Mermaid 圖表

製作 Mermaid 圖表

免費開始 · 無需信用卡 · 為研究者打造