Mermaid 図を埋め込む
Mermaid 図を作成し、任意のウェブサイトに埋め込める共有可能な iframe コードを取得できます。無料、即時、アカウント不要。
Mermaid 図を埋め込む
Mermaid 図を作成し、任意のウェブサイトに埋め込める共有可能な iframe コードを取得できます。無料、即時、アカウント不要。
あなたの Mermaid コード
ライブプレビュー
埋め込みコード
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>開発者向け
このエディターを使わずに、プログラムで埋め込み URL を生成できます。図のコードは URL セーフな base64 でエンコードされます。
URL 形式
https://mermaideditor.com/embed?code={encoded}&theme={theme}エンコード方法
// JavaScript const encoded = btoa(encodeURIComponent(mermaidCode)) const embedUrl = `https://mermaideditor.com/embed?code=${encoded}&theme=default` // Python import base64, urllib.parse encoded = base64.b64encode(urllib.parse.quote(mermaid_code).encode()).decode() embed_url = f"https://mermaideditor.com/embed?code={encoded}&theme=default"対応テーマ: default · dark · forest · neutral
Mermaid 図の埋め込み方法
上のエディターで Mermaid 図のコードを記述します
ワンクリックで生成された iframe コードをコピーします
任意のウェブサイト、ブログ記事、ドキュメントページに貼り付けます
使用シーン
GitHub と GitLab
wiki ページ、issue の説明、プロジェクトドキュメントにライブ図を埋め込めます。
ドキュメントサイト
Confluence、Notion、その他 HTML ベースのドキュメントプラットフォームにインタラクティブな図を追加します。
ブログ記事
アーキテクチャ図、フローチャート、シーケンス図で技術記事を充実させます。
社内 wiki
埋め込み図でチームの知識ベースを視覚的かつ最新の状態に保ちます。
よくある質問
埋め込み機能は無料ですか？
はい、完全に無料です。使用制限はなく、アカウントも不要で、生成された iframe URL は無期限に機能します。
埋め込まれた図はどのブラウザで対応していますか？
埋め込みビューアーは Chrome、Firefox、Safari、Edge を含むすべての最新ブラウザで動作します。標準的な HTML5 と JavaScript を使用しています。
iframe のサイズをカスタマイズできますか？
はい — 生成された iframe コードの width と height 属性を編集するだけで、レイアウトに合わせることができます。CSS を追加してレスポンシブにすることもできます。