MermaidをSVGに変換する

Mermaidのコードを、幅と高さを持つ単体のSVGにします。どんな倍率でも鮮明で、Figma、Illustrator、Inkscapeで開け、WebサイトやREADMEファイルにもきれいに埋め込めます。

ずっと無料 · 端末の中で動作 · アップロード0バイト

.mmdファイルを選択 またはここにドロップ · 端末の外には出ません

Mermaidコード保存形式 PNGのサイズテーマ背景を透明にする

遅い、または動かない場合は、GitHubで報告してください

MermaidをSVGに変換の使い方

Mermaidコードを貼り付けるか、.mmdまたは.mdファイルを選んでください。
テーマを選びます。必要なら背景を透明にします。
「SVGを作成」をクリックし、プレビューを確認してからダウンロードします。

こんな使い方にも

Mermaid SVG 変換
Mermaid 図 SVG 書き出し
Mermaid SVG ダウンロード
Mermaid Figma SVG
Mermaid ベクター画像変換

Mermaidのサンプル（ここから始められます）

flowchart

flowchart TD
    Start([Order placed]) --> Pay{Paid?}
    Pay -->|Yes| Ship[Pack and ship]
    Pay -->|No| Remind[Send a reminder]
    Remind --> Pay
    Ship --> Done([Delivered])

sequenceDiagram

sequenceDiagram
    participant U as User
    participant A as App
    participant S as Server
    U->>A: Log in
    A->>S: Check password
    S-->>A: OK
    A-->>U: Welcome back

classDiagram

classDiagram
    class Customer {
      +String name
      +String email
    }
    class Order {
      +String id
      +Date placedAt
      +total() Number
    }
    Customer "1" --> "*" Order : places

erDiagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "appears in"

gantt

gantt
    title Website launch
    dateFormat YYYY-MM-DD
    section Build
    Design      :a1, 2025-01-06, 5d
    Development :a2, after a1, 10d
    section Launch
    Testing     :after a2, 4d

pie

pie title Where the week goes
    "Coding" : 45
    "Meetings" : 30
    "Reviews" : 15
    "Email" : 10

設計からプライベート。しかも確かめられます

アップロード先がそもそも存在しないので、ファイルがアップロードされることはありません。

アップロードの工程がありませんファイルはこのブラウザのタブの中で読み書きされます。ファイルを受け取れるサーバーはありません。
ブラウザが強制しますこのページのコンテンツセキュリティポリシーは、このサイトへの接続だけを許可しています。このサイトが配信するのはアプリ本体だけです。
ご自身で確認できます開発者ツールを開き、ネットワークタブを見ながら処理を実行してください。ドキュメントを送るリクエストは1つもありません。
オープンソースすべてのコードをGitHubで公開しています。Mermaidを利用して作られています。

よくある質問

ファイルはどこかにアップロードされますか？

いいえ。Fizzdocはブラウザのタブの中ですべての処理を行います。WebAssemblyとJavaScriptにコンパイルされたオープンソースのエンジンを使っています。ファイルはお使いの端末から読み込まれ、端末の中で処理され、結果はそのまま端末に保存されます。ご自身で確かめることもできます。ブラウザの開発者ツールを開き、ネットワークタブを見ながら処理を実行してください。ファイルを送るリクエストは1つもありません。

あとからSVGを編集できますか？

はい。文字は本物のテキストのまま、図形はベクターパスのまま残るため、Figma、Illustrator、Inkscapeなど、ほとんどのデザインツールで開いて編集できます。

SVGをWebサイトに置いても安全ですか？

Mermaidは厳格モードで動作し、ラベルからスクリプトとクリック時の処理を取り除くため、SVGには図とそのスタイルだけが含まれます。

Fizzdocは無料ですか？

はい。これからも無料です。会員登録不要、透かしなし、1日の回数制限なし、有料プランもありません。FizzdocはApache-2.0ライセンスのオープンソースなので、誰でも自分用のコピーを動かせます。