オンラインMermaidエディタ（テキストで図を作成）

Mermaidコードを貼り付けるか書いてください。入力しながらプレビューが更新され、サンプルで図の種類を確認できます。

図を書いて、絵を見る

サンプル：

flowchart LR
    A[Ideia] --> B{Vale a pena?}
    B -- sim --> C[Planejar]
    B -- não --> D[Arquivar]
    C --> E[Executar] --> F((Pronto))

sequenceDiagram
    Cliente->>Loja: Faz o pedido
    Loja-->>Cliente: Confirma por e-mail

pie title 予算の使い道
    "Aluguel" : 35
    "Equipe" : 40
    "Marketing" : 15
    "Outros" : 10

journey
    title サイトでの購入
    section 発見
      Googleで店を見つける: 4: 顧客
      商品を見る: 5: 顧客
    section 購入
      住所を入力する: 2: 顧客
      支払う: 3: 顧客

quadrantChart
    title タスクの優先度
    x-axis Pouco esforço --> Muito esforço
    y-axis Pouco impacto --> Muito impacto
    quadrant-1 計画する
    quadrant-2 今すぐやる
    quadrant-3 後回しにする
    quadrant-4 見直す
    新しいサイト: [0.7, 0.85]
    Instagramの投稿: [0.2, 0.6]
    ロゴの変更: [0.6, 0.3]

gitGraph
    commit
    branch nova-tela
    checkout nova-tela
    commit
    commit
    checkout main
    merge nova-tela
    commit

Mermaidコード

利用できる言語:

次のツール算数ドリルジェネレーター→

オンラインMermaidエディタ（テキストで図を作成）: 用途

Mermaidコードを書くか貼り付けると、入力に合わせて図が更新されます。サンプルボタンで、フローチャート、シーケンス図、円グラフ、ユーザージャーニー、四象限チャート、Gitグラフを確認でき、エディタはクラス図、状態遷移図、ER図、ガントチャート、マインドマップ、タイムラインなど、Mermaidのほかの種類にも対応しています。

使い方

Mermaidコードを書くか、サンプルを選びます。
テキストを調整して、プレビューを確認します。
PNGまたはSVGでダウンロードするか、コードをコピーします。

使うタイミング

GitHubに載せる前に図を試す。
技術ドキュメント。
プレゼン用の簡単な図を作る。

よくある質問

Mermaidとは何ですか？

図をテキストで記述するためのオープンな言語です。GitHub、GitLab、Notion、多くのドキュメントエディタがMermaidのブロックを自動で描画するため、同じコードをプロジェクトのドキュメントにそのまま使えます。

どんな種類の図が作れますか？

フローチャート (flowchart)、シーケンス図、クラス図、状態遷移図、ER図、ガントチャート、円グラフ、ユーザージャーニー、四象限チャート、Gitグラフ、マインドマップ、タイムラインなどです。各種類は、flowchart、sequenceDiagram、pie のように、1行目の単語で始まります。

コードは保存されますか？

はい。保存されており、戻ってきたときもここに残っています。戻ると、最後の図が再び表示されます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。