Mark Ku's Blog
Atlassian Forge App即將推出

Super Mermaid for Jira & Confluence

在 issue 與文件內文裡直接畫 Mermaid 圖。圖表存在 Atlassian 自己的資料裡,app 不會把它送到任何第三方伺服器。

免費,無使用量限制🔒 Runs on Atlassian
Jira issue — Super Mermaid 面板
Jira:issue 上的圖表面板

目前狀態:還沒上架 Marketplace

兩個 app 都已經部署到 Atlassian Forge 的開發環境,也在真實站台跑起來了(下面的截圖就是實機畫面)。還沒送審上架,所以現在只能用 Forge CLI 自行部署到自己的站台。上架之後這一頁會換成一鍵安裝。

介紹影片

幾分鐘看懂這兩個 app 在 Jira 與 Confluence 裡怎麼用

直接在這裡試玩

下面就是兩個 app 內建的同一套繪圖引擎。拖節點、拉連線、改文字都可以,不用安裝也不用登入。

這是完整的編輯器,不是錄影。改完的結果會即時序列化回 Mermaid 語法。

兩個 app,同一套引擎

同一個渲染器,分別長在 Jira 與 Confluence 上

📋

Super Mermaid for Jira

在任一張 issue 開一個圖表面板:點 Source 貼上語法、Save,圖就跟著這張 issue 走。用 + 分頁可以在同一張 issue 放好幾張圖。

圖表存在 issue property 裡,沿用 Jira 既有的權限與備份,issue 刪掉圖也跟著刪。

📄

Super Mermaid for Confluence

在頁面上打 /Super Mermaid 插入 macro,圖直接嵌在內文裡跟文字混排,不是旁邊另外掛一張圖片。

原始碼存在 macro 參數裡,跟著頁面版本走:複製頁面圖跟著複製,回溯版本看到的是當時那張圖。

會有什麼

目前已經跑得起來的功能

🧩

11 種圖表,貼上就有

不管是請 AI 幫你生成的流程圖,還是自己手刻的時序圖、甘特圖,flowchart、sequence、class、state、ER、gantt、pie、mindmap、timeline、user journey、git graph 全部支援,貼進 issue 或頁面就直接畫出來,不用截圖上傳。

🔍

圖再複雜,同事也找得到

圖畫複雜了,同事常常看不清楚細節;滾輪縮放、拖曳平移、觸控雙指縮放都有,在圖裡搜尋文字會直接跳到對應的節點,不用瞇眼睛找。

🖼️

存成圖片,隨你貼

要把圖放進簡報或工單附件?一鍵存成向量或點陣圖,不用再另外截圖裁切。

🌗

跟著佈景走,不會格格不入

圖表自動跟著你的 Atlassian 深色/淺色模式切換,看起來就像原生功能,也能在工具列直接手動切換。

🈶

中文、日文、韓文不會斷錯行

很多 Mermaid 工具的中日韓文字節點會斷行斷得很奇怪;這裡字型直接內建在 app 裡(不從 CDN 抓),排版跟置中都正常。

🗂️

一張需求單,放好幾張圖

同一張需求常常要同時畫流程圖跟狀態機;Jira 版用分頁管理,不用為了放圖硬拆成好幾張 issue。

🔗

分享連結,不用截圖傳來傳去

想找站外的人、或請 AI 一起看這張圖?一鍵把圖編成一段網址複製到剪貼簿,對方打開瀏覽器就看得到、還能繼續編輯,不用給他 Jira 帳號。連結指向 blog.markkulab.net 上的 Super Mermaid 線上預覽,那是 Atlassian 以外的外部網站;圖表內容放在網址 # 之後(瀏覽器不會送給伺服器),但拿到連結的人就看得到這張圖。

🖐️

不懂語法的同事,也能自己改圖

市集上的 Mermaid app 全部只能打字,看得懂語法才能動;這裡可以直接用拖的——拉節點、連線、換外形、一鍵整版,PM 或設計師不用學語法也能自己調整,改完照樣無損轉回乾淨的 Mermaid 原始碼。這是這個 app 真正想解決的問題。

Runs on Atlassian:圖表存在你自己的站台

渲染引擎、字型與所有相依套件都包在 app 裡出貨,app 本身不會對任何外部網域發出請求。這件事你可以自己打開瀏覽器的 Network 面板驗證,比任何文件都可信。唯一對外的出口是工具列的「分享連結」:要你主動按下才會產生,按下去只是把網址複製到剪貼簿,不會儲存、只會顯示。但那段網址指向 blog.markkulab.net 的線上預覽頁,是 Atlassian 以外的外部網站,打開它就等於把這張圖帶出你的站台。

  • app 自己不對外發請求,DevTools 開起來自己看
  • 唯一的對外出口是工具列的「分享連結」:按下去只把網址複製到剪貼簿,不會儲存、只會顯示;那段網址指向 Atlassian 以外的外部網站(blog.markkulab.net),要不要貼出去、要不要打開由你決定
  • 資料存在 issue property 或 macro 參數裡,不經過任何第三方伺服器
  • Confluence 版連 API 權限都不需要

實機畫面

真實站台的截圖,不是示意圖

Jira:issue 上的圖表面板

Jira:issue 上的圖表面板

面板嵌在 issue 內容區,工具列有縮放、Fit、1:1、搜尋、SVG / PNG 匯出、Source 與明暗切換;左上角的分頁可以再加一張圖。

Confluence:圖嵌在內文裡

Confluence:圖嵌在內文裡

macro 直接排在段落之間,跟文字混排。點一下圖再按編輯就能改語法,原始碼跟著頁面版本一起存。

現在就想用?自行部署

  1. 1

    裝 Forge CLI:npm install -g @forge/cli

  2. 2

    forge login,用你的 Atlassian API token 登入

  3. 3

    clone GitHub 上的原始碼,npm install 之後 forge deploy

  4. 4

    forge install,選 Jira 或 Confluence,輸入你的站台網址

  5. 5

    開任一張 issue(或在頁面打 /Super Mermaid),面板就出現了

需要 Atlassian Cloud 站台與管理員權限。Data Center 不支援,因為 Forge 是 Cloud 專屬平台。

上架前先追蹤進度

原始碼、安裝說明與隱私權政策都在 GitHub 上;上架之後這一頁會直接換成 Marketplace 安裝按鈕。

Super Mermaid for Jira / Confluence — 在 Atlassian 裡畫 Mermaid 圖 | Mark Ku 的技術部落格 - Mark Ku's Blog