🧜‍♀️

【図解する人必見!】無駄なくmermaid.jsを画像化するサービスをAI駆動x個人開発で公開しました

2025/01/12に公開1

Mermaid Exporter 公開しました!

mermaid.js のコードをスマホでも手軽に画像化できるサービス」
それが Mermaid Exporter です。

https://mermaid-exporter.web.app/

皆さん、図解を作りたいときって、どんなツールを使っていますか?
エンジニアの方やプロジェクトマネージャーの方なら、Mermaid.js でサクッとフローチャートやシーケンス図を描いたことがある方もいるかもしれません。
ですが、電車での移動中やちょっとした空き時間に、スマホでサクッと Mermaid.js の記法を試したいというニーズ、意外とありませんか?

「Mermaid Exporter」は、そんな声に応える形で生まれました。
ほんの 1 ページだけのシンプルなサイトですが、ここにこだわりを全部詰め込みました。


開発のきっかけ・背景

なぜ Mermaid Exporter を作ろうと思ったのか?

  • 既存の mermaid.js を表示して画像化するサイトはいろいろ試しましたが、PCでは十分なものでも、スマホで手軽にというところを満たすものが意外と見つかりませんでした。
  • 「出先や移動中にアイデアをパッと図解できたら便利なのに……」という思いが大きなきっかけです。

どんな課題や不便を解決するのか?

  • AI が生成してくれた Mermaid.js のコードを、スマホでそのままコピペし画像化できる。
  • PC を持ち歩いていないときでも思いついたアイデアをすぐに図解して保存できる。

既存ツールではカバーできなかった点

  • スマホでの使いやすさにとことんこだわったこと。
  • 限りなくシンプルな UI・UX であること。
  • PC でももちろん使えますが、移動中でもすぐに開いて入力できるくらい軽量設計です。

Mermaid Exporter とは?

Mermaid.js の記法を簡単に入力し、即座に図表をプレビュー・画像として保存できる シングルページアプリ です。

主な機能

  • エディタ部分へのコピペだけで OK。自分で一から書きたい場合ももちろん可能。
  • コードテンプレートも用意してあるので、Mermaid.js に不慣れでも始めやすい。
  • 入力したら 即時プレビュー されます。もし変になったらリロードボタンで再レンダリング可能。
  • スマホでも使いやすい UI/レスポンシブ対応。余計なリンクがなく、画面いっぱいにエディタ&プレビューを配置しています。

想定ユーザー・利用シーン

  • プロジェクトマネージャー (PM) の方が、移動中にふと湧いたアイデアを整理したいとき。
  • エンジニアやデザイナーが、Slack や X (旧 Twitter) などで共有するちょっとした図を作りたいとき。
  • AI が生成した Mermaid.js コードの受け皿としての利用:AI から出たコードをコピペして調整・保存すれば、空き時間の有効活用ができる。
  • 個人の作業でも、チームでの共有でも、スピーディに図化したい場合に最適です。

使い方

  1. サイトにアクセスする

  2. Mermaid.js のコードを入力

    • 画面に大きく表示されているエディタ欄に、Mermaid.js のコードをコピペしたり直接書いたりします。
    • テンプレートも数種類用意しているので、初めての方でも気軽に試せます。
  3. リアルタイムでプレビュー

    • 入力内容は自動でプレビューされます。
    • 構文エラーが出た時はエラーメッセージが表示されるので修正が簡単です。
    • また、画面右上のリロードボタンで再レンダリング可能です。
  4. 画像を保存する

    • プレビューを確認して OK なら、そのまま画像として保存できます。
    • スマホでも保存しやすく、SNS への共有もラクラクです。

技術スタック・開発環境

  • フレームワーク:Next.js (TypeScript + Tailwind CSS + shadcn/ui)
  • コアライブラリ:mermaid.js
  • ホスティング:Firebase (Web App)
  • データベースやサーバーサイド:特に大きなものは使っていません。AI 駆動開発のサンプル事例の一環として作成しています。

開発時間はなんと 3 時間!
AI と一緒にサクサク作り上げたので、これといった大きな苦労はなく、構文エラー処理くらいが UX の肝でした。


今後の展望

  • テーマ(色)の編集機能を搭載して、より自分好みのデザインで図を作れるようにしたい。
  • Mermaid.js がサポートする他のチャートもサンプル付きで活用できるようにする。
  • AI との連携をより強化して、入力した文章から直接 mermaid.js のコードを生成→画像化 までワンストップで行えるようにしたい。

リリース直後の反響

  • 正直まだフィードバックは少ないですが、自分が一番使いたいという熱量で作りました!
  • 今後口コミや X (旧 Twitter) などで盛り上がってくれると嬉しいです。

使ってもらうための導線

  • 公式サイトMermaid Exporter
  • SNS:X (旧 Twitter) ですでに宣伝済み。引き続きそこでも情報発信中。
  • 料金:完全無料で使えます。人気が出過ぎたらどうしよう……と嬉しい悩みを抱えています。

細かいストーリー・エピソード

  • 「3 時間で作った」 と言うと驚かれますが、AI の力をフル活用して開発速度を爆上げしました。
  • 開発はほぼ一人で完結したため、チーム内調整や会議は一切ナシ。ストレスフリーに作れました。

さいごに

読者の皆さんへメッセージ

  • AI 駆動開発、最高。 今後もこういったツールをどんどんリリースしていきたいです。
  • お気軽に Mermaid Exporter を使ってみてください。移動中やちょっとした時間でアイデアを具現化できます!

今後のアップデートや要望受付

  • もし 「こんな機能が欲しい!」 という声があればぜひ教えてください。
  • X (旧 Twitter) で情報発信中なので、フォローいただけると最新情報をお届けできます。

👇フォローはこちらから
https://x.com/ai_masaou


まとめ

スマホで mermaid.js を扱えるサービスって、なかなか見当たらないんですよね。
だからこそ、自分が 「欲しい!」 と思える形にまとめたのが「Mermaid Exporter」。
ぜひ、隙間時間の図解作成に使ってもらえたら嬉しいです!

Mermaid Exporter を使ってみる

最後まで読んでいただき、ありがとうございました!

Discussion