キーはブラウザの中だけにあります。キーはブラウザからプロバイダーへ直接送られ、当サイトのサーバーには届きません。記録も保存もしません。利用上限を設定した専用キーを使い、使い終わったら管理画面で削除してください。
入力
結果
結果はここに表示されます。Mermaid は数行のテキストを図に変える記法で、GitHub、GitLab、Notion、Obsidian をはじめ多くのドキュメントツールがネイティブにレンダリングします。そのためアーキテクチャのメモは、誰も編集できない書き出し画像ではなく Mermaid で残されることが増えています。時間がかかるのは、構文を手で書く部分です。サインアップの流れ、決済の呼び出しチェーン、データモデルなどを普通の言葉で説明し、図の種類を選ぶと、モデルは Mermaid コードだけを返します。フェンスも解説も付かないので、そのまま Markdown ファイルに貼り付けられます。レンダリング結果を確認したいときや、ラベルを手で直したいときは、このサイトの Mermaid エディターに貼り付けてください。
動作のしくみ
- プロンプトは Fabric の create_mermaid_visualization パターンを改変したものです。図だけで内容が伝わるようにという要求は残し、出力が純粋なコードになるよう文章の説明セクションは削除し、Mermaid の構文ルールを追加しました。
- これらのルールは、生成された図がレンダリングできなくなる代表的なミスを狙い撃ちしています。かっこや非 ASCII 文字を含むラベルを引用符で囲んでいない、ノード名が end、alt や loop ブロックが閉じていない、ガントのタスク名にコロンが含まれている、といったものです。
- ラベルやメッセージは入力した言語のまま返り、ID やキーワードはパーサーの要件どおり ASCII のままです。モデルが仮定せざるを得なかった点は、黙って作り込まず %% コメントとして示されます。
- 説明文はブラウザから AI プロバイダーへ直接届き、あなた自身のキーで認証されます。図のリクエストは小さいので、上限を厳しく設定した使い捨てのキーで十分です。
データの行き先
自分のキーを使う場合、入力内容とキーはブラウザから選んだ AI プロバイダーへ直接送られ、Hysen Labs のサーバーは経由しません。ホスト型では、入力内容が当サイトのサーバーを経由して当サイトのプロバイダー（DeepSeek）に送られ、credits で課金されます。課金のために各実行のトークン数とコストだけを記録し、入力内容や回答そのものは保存しません。送信内容の扱いは各プロバイダーのプライバシーポリシーに従います。
このツールは鍵や資格情報を扱うため、実行に関する情報は一切保存されません。あなた自身の履歴にも残りません。
API キーについて
キーを収集・保存・漏えいすることはありません。キーはこのページのメモリ上にだけ置かれ（「このタブで記憶」を選んだ場合を除く）、ページを閉じれば消えます。それでも、Web ページに貼り付けたキーは慎重に扱ってください。ここで使う専用キーを利用上限つきで作成し、使い終わったらプロバイダーの管理画面で削除またはローテーションすることをおすすめします。
必要なポイント
このツールは無料です。ログインもポイントも必要ありません。
よくある質問
- コードがレンダリングされません。まず何を確認すればいいですか？
- Mermaid エディターに貼り付けて、パーサーのエラー行を読んでください。よくある原因は、かっこや引用符を含むラベルがダブルクォートで囲まれていない、alt や loop ブロックのあとに end がない、モデルが結局 ```mermaid のフェンスを付けてしまった（削除してください）のいずれかです。より大きなモデルで再生成すると、構文ミスの大半も解消します。
- どの図の種類を選べばいいですか？
- 分岐のある処理ならフローチャート、サービス間や人の間で時間の流れに沿ってやり取りされるリクエストならシーケンス図、オブジェクトモデルならクラス図、データベースのテーブルとカーディナリティなら ER 図、期間と依存関係のある計画ならガントチャートです。迷ったら、最も融通が利くフローチャートを選んでください。
- 自分のコードを読み込んで図にできますか？
- コードを説明欄に貼り付けてクラス図かシーケンス図を指定すれば、たいていはそれなりのスケッチが得られます。ただし見えるのは貼り付けた部分だけなので、複数のファイルにまたがる呼び出しチェーンは不完全になります。図にしたい部分だけに入力を絞ってください。
- 色やスタイルが付かないのはなぜですか？
- 生成された Mermaid が最も壊れやすいのがスタイル指定の構文で、しかもテーマは GitHub、ドキュメントサイト、エディターごとに異なります。そのためコードではスタイルをレンダラーに任せています。構造が固まったら、classDef の行を自分で追加してください。
背後にあるオープンソース
このツールのプロンプトは danielmiessler/Fabric（MIT）を元にしており、選択したモデルで実行されます。コマンドラインや自分のプログラムで同じことを行うなら、このプロジェクトから始めてください。
danielmiessler/Fabric別の呼び方
- mermaid 図 作成
- フローチャート 自動生成
- ai フローチャート 作成
- mermaid ai
- シーケンス図 作成
- er図 作成