RedmineのUIを強力に拡張！「UI Extension」でMermaidマクロを活用して図を描画しよう

2025/06/06

プラグイン

UI Extensionとは？

「UI Extension」は、Redmineのクラウドサービス「My Redmine」用に開発したプラグインです。オープンソースとしても公開しています。

添付ファイルのプレビュー、セレクトボックスでのキーワード検索による選択肢絞り込み表示、ロードマップ画面でのバージョンごとのバーンダウンチャート表示など、様々な機能でRedmineの操作性と視認性を向上させます。

Mermaidマクロとは？テキストから図を簡単作成

本記事では、UI Extensionの機能のうち、Mermaidマクロについて解説します。Mermaidは、テキストベースのシンプルな記法を用いることで、フローチャート、シーケンス図、ガントチャートなど、様々な種類の図を手軽に描画できるオープンソースのツールです。

RedmineのWikiやチケットの説明欄などでMermaid記法に沿ってテキストを入力するだけで、図に変換し、表示します。特別な描画ソフトを起動することなく、Redmineの画面上で直接図を作成できるため、情報の共有や視覚的な表現がスムーズに行えます。

Mermaidマクロで何ができる？

フローチャート： プロセスの流れや意思決定のパスを視覚的に表現できます。
シーケンス図： 複数のオブジェクト間のメッセージの流れや相互作用を時間軸に沿って表現できます。
ガントチャート： プロジェクトのタスクのスケジュールや依存関係を視覚的に表示できます。
クラス図： ソフトウェアのクラス構造や関連性を表現できます。
状態図： オブジェクトの状態遷移を表現できます。
円グラフ： データの内訳や構成比率を視覚的に表現できます。
その他： ER図、ユーザーインタラクション図など、様々な図をテキストで描画可能です。

Mermaidマクロのメリット

手軽さ： 専用の描画ツールを起動する必要がなく、Redmineのテキスト入力欄だけで図を作成できます。
記述の容易さ： 直感的なテキスト記法なので、プログラミングの知識がなくても比較的簡単に記述できます。
表現力の向上： テキストだけでは伝わりにくい情報を、視覚的に分かりやすく伝えることができます。

Mermaidマクロの基本的な使い方

RedmineのWikiやチケットの説明欄でMermaid記法を使用するには、以下のように記述します。


{{mermaid
graph TD
A[Start] --> B{Is it green?};
B -- Yes --> C[Go ahead];
B -- No --> D[Stop];
}}

上記の例では、簡単なフローチャートを描画するMermaid記法を {{mermaid}} で囲んでいます。My Redmine上で以下のようなフローチャートとして表示されます。

より詳細記法は、Mermaidの公式ドキュメント (https://mermaid.js.org/) を参照してください。

まとめ

「UI Extension」のMermaidマクロ機能は、Redmineの表現力を高め、情報伝達の効率を向上させる強力なツールです。フローチャートやシーケンス図などをテキストで手軽に描画できるため、プロジェクトの様々な情報を視覚的に共有し、チーム全体の理解を深めるのに役立ちます。ぜひ「UI Extension」を導入して、Mermaidマクロの便利さを体験してみてください。