はじめに
READMEにMermaidでアーキテクチャ図を入れることが増えましたが、確認するたびにブラウザやVS Codeのプレビューを開くのは面倒です。コマンドラインで作業しているのに、図を見るためだけにコンテキストスイッチが発生する。
cat README.md のように、ターミナル上でMarkdownのテキストもMermaidの図も一緒に確認できるCLIツール glowm を作りました。開発はOpenAI Codexとの対話だけで完結させています。
作ったもの
glowmは、Glow風のMarkdown表示機能に加えて、Mermaidダイアグラムをターミナル内で画像として表示できるCLIツールです。
主な機能
- Glamourベースの美しいMarkdown → ANSIレンダリング
- Chromedp + Mermaid.jsによるブラウザ不要のMermaid → PNG変換
- iTerm2/Kittyのインライン画像プロトコルで図をターミナル内に直接表示
--pdfオプションでMermaidダイアグラムをPDF化
# 基本的な使い方
glowm README.md
# 標準入力から
cat README.md | glowm -
# PDF出力
glowm --pdf README.md > diagram.pdfCodexとの開発プロセス
1. 要件整理 – スコープの絞り込み
最初は「Glow相当 + mermaid-CLI相当 + 標準出力」という漠然とした要望からスタート。Codexと対話する中で、以下のように仕様が固まっていきました。
- コマンド名: glowmに決定
- 出力: 標準出力が基本、PDFはオプション
- 実装言語: Go
- 外部コマンド依存なし（glow/mermaid-CLIを呼ばない自己完結型）
重要だったのは「URL/GitHub入力の意義が不明」という指摘。ローカルファイルとSTDINのみに限定することで、シンプルな仕様に収束しました。
2. 実装途中での方針転換
MVP実装後、大きな問題が発覚しました。
「ANSIで出力しても、Mermaidの図が見えない」
当初はMermaidをテキストとして表示していましたが、「端末内で図として見たい」という本来の目的に立ち返り、実装方針を大きく変更。
- iTerm2/Kittyの画像プロトコル対応を採用
- MermaidをPNG化してインライン表示
- 非対応端末では従来通りコードブロック表示
この方針転換がglowmの最大の特徴になりました。
3. 細かな調整の積み重ね
Codexとの対話で、表示品質を段階的に改善しました。
- 画像サイズを端末幅に合わせて動的に拡大
- フォントサイズを14px→16px→18px→20pxと段階的に調整
- Glamourのデフォルト
##プレフィックスを削除
4. リリースまで自動化
GitHub pushからHomebrew Formula作成まで、Codexの指示通りに進めました。
brew tap atani/tap
brew install glowm技術的なポイント
外部依存なしのMermaid変換
Chromedpを使い、ヘッドレスChromeでMermaid.jsを実行します。mermaid-CLIのインストール不要で、Mermaidのレンダリングを実現しています。
ターミナル画像プロトコル
iTerm2とKittyは、Base64エンコードした画像をエスケープシーケンスで出力することで、インライン画像表示ができます。glowmはTERM_PROGRAM環境変数で端末を判定し、iTerm2ならOSC 1337、KittyならKittyプロトコルで出力します。
Codexだけで開発して感じたこと
- 対話の中で「それ本当に必要？」と問われることで、スコープの絞り込みが自然にできた
- 実装途中でも「やっぱりこうしたい」と言えばすぐ方針転換できるハードルの低さ
- ADR、PRD、Tasksなどのドキュメントもコードと並行して作成できた
おわりに
glowmは「ターミナルでMarkdownとMermaidを一緒に見たい」というシンプルな欲求から生まれました。PRレビューやSSH先でのドキュメント確認など、ブラウザを開かずに図を確認したい場面で役立っています。
Codexとの開発は、要件整理から実装、リリースまで一気通貫で進められる新しい体験でした。
関連記事
CLIツールやOSSの開発記事をほかにも書いています。
リンク
- GitHub: https://github.com/atani/glowm
- Homebrew:
brew tap atani/tap && brew install glowm
