Mermaid 記法をターミナルに ASCII 図で描画する

Transcript

1. Mermaid 記法をターミナルに ASCII 図で描画する #さくらじまハウス2026 2026/10/18
2. # 自己紹介 $ whoami - もりた / morit958 鹿大の大学院生 好きな言語は Go 趣味: 食べる/歩く/寝る
3. # 今日お話すること - 自作ツールの機能開発を AI とした話です - 話さないこと - 使用技術の詳しい話 実装した処理の詳しいロジックなど (興味ある人いたら後でブログに書きます)
4. # 背景 - 自作の TUI メモツール に Mermaid 記法の表示機能を実装しています - Markdown で書いたメモ中の mermaid コードブロックを ASCII 図として表示する機能 - ゴールイメージ ↓ こんな感じで Mermaid の図を表示します
5. # そもそも Mermaid 記法とは - Mermaid という記法でフローチャート図などをかける - テキストが図に変換される - ブラウザ前提
6. | これをターミナル上でやる
7. # 作るもの - 部品: Mermaid パーサー - Mermaid の構文解析器 ASCII 図のテキストへ変換 本物のパーサーを作るわけでは無い (AST とかはない) - とはいえ、 - Mermaid 記法の文法はたくさんある - パーサー書くのも難しそう - どうしよう...
8. | AI たくさん使えるじゃん (Claude のトークンリセット券が配布されてた)
9. # 完成イメージ - ↓ このメソッドを呼び出したら ASCII 図の描画まで出来ることを目指す (シンプルなインターフェース!!!) - 取説 - 第１引数: Mermaid のソーステキスト 返り値: 描画後の ASCII 図テキスト 第２引数: 描画時に色付けをしたいときに使う
10. # テストを書く 入力値のファイル 期待値のファイル (golden) こんな感じのテストデータを 複数セット用意する
11. # 実装 - あとは頼んだ。 Opus 5.5 がんばれ
12. # できた - テスト完走 - 全 PASS テストデータは 30 セットくらい用意した とりあえず flowchart 記法のみ対応
13. # メモツールに組み込む - 完成!!! 🎉🎉🎉🎉🎉 メモの中身
14. # Before/After After Before ちゃんと図で表示され るようになった 🙌
15. # あっさりできた かかった時間は 2~3h くらいだった (AI すごい) - 何がよかったか？ -
16. # やって良かったこと 1. モジュールのインターフェース設計 - Deep Module (インターフェースは小さく・実装は深く) Render() メソッド 1 つ 内部実装は 約 3,000 行 2. 公開 API をテストする - Render() メソッドの入力値・期待値を用意してテスト 公開インタフェースをブラックボックス的にテストする 内部詳細のテストを書きすぎるとリファクタ耐性が落ちる
17. # その結果 AI との意思疎通がスムーズにできた - インターフェースが小さい - モジュール間の呼び出しが複雑化しにくい - - 🍝ができにくい 差分のレビューがしやすい テストによる明確なゴール - AI が迷わない
18. # まとめ - 趣味で TUI メモツールを作ってます - v1 は未リリース - Mermaid 記法に対応するために実装中です - 興味分野 - Web/Go言語/サーバー運用/構文解析… etc. - などに興味があります - ぜひ同じ興味のある方も、興味のない方もお話ししたいです！