とにかく使いやすい
部品を1回選ぶと、よく使う操作がアイコンで出ます。ダブルクリックで編集、つまみから別の部品へ引けば線がつながります。やり直し・進むもいつでも。iPadなどでは「選択モード」で、範囲選択も1つずつの複数選択も指で。どの図も同じ操作なので、覚えることはほとんどありません。
PRODUCT
WebUML
ER図もUML図もマインドマップも。ブラウザで動く、無料の図エディタ。
インストール不要・登録不要。データはあなたの端末の中だけに。
👥 利用者数 0 人
FEATURES
図づくりに、必要なものを。
画面はシンプルに。やりたいことに、少ない操作でたどり着けます。
PC・iPad・タッチ操作に最適化
画面の大きさや入力方法に合わせて、どの端末でも同じようにシンプルに使えます。iPadの指やApple Pencilでも、ボタンが押しやすく迷いません。
データは端末の中だけ
作った図は、お使いのブラウザの中にだけ保存されます。図のデータを外部へ送信する機能は一切ありません。アカウント登録も不要です。
DBダンプをそのままER図に
PostgreSQLの pg_dump ファイルを読み込むだけで、テーブル・カラム・主キー/外部キー・インデックス・シーケンスをまとめて取り込みます。既存システムのER図が、すぐ手に入ります。
DDL・テーブル定義書を簡単に
図からワンクリックで DDL(PostgreSQL) と Excelのテーブル定義書 を出力。テーブル1つでも、図全体でも、プロジェクト全体でもOKです。
多彩な出力:画像・PDF・テキスト
図は PNG・SVG・PDF の画像にして、そのまま資料へ。どの種類の図も同じ操作です。PlantUML・Mermaid・Markdownのテキスト、Excel、DDLにも書き出せます。ヘッダーの「コード生成」アイコンで、コードをすぐ取り出せます。
日本語・English・中文に対応
ブラウザ(システム)の言語に合わせて、表示が自動で切り替わります。画面右上のツールメニュー(≡)から、言語を自分で選ぶこともできます。
プロジェクトはJSONファイル
保存形式はテキスト(JSON)の .webuml ファイル。Gitで管理しやすく、変更の差分も簡単に確認できます。AIに読ませて相談・レビューするのにも向いています。
プラグインで機能を追加
DDLの出力や取り込みもプラグインで動いています。ご自身で作った独自のプラグインを入れて、自社のルールに合わせた出力などにカスタマイズできます。
無料で、業務にも使える
ご利用は無料です。個人の学習から、業務でのご利用まで、費用はかかりません。
アプリとしてインストールOK
PWA(Progressive Web App)に対応。ホーム画面やデスクトップに追加すれば、普通のアプリのように起動できます。
INSTALL
インストール方法
ブラウザのままでも使えますが、インストールすると、アドレスバーのない専用ウィンドウで、アプリのように起動できます。インストールは無料で、数秒で終わります。
💻 PC(Chrome / Edge)
- アプリを開く
- アドレスバー右端の インストール アイコン(⊕や画面のマーク)をクリック
- 表示された確認で インストール を押す
見当たらないときは、ブラウザのメニュー →「アプリをインストール」「WebUMLをインストール」から。
🧩 Chrome拡張機能(Chrome / Edge)
- Chrome ウェブストアの WebUML を開く
- Chromeに追加 を押す
- ツールバーの WebUML アイコンを押すと、新しいタブで開く
アプリと同じ機能を、ブラウザの中で一発で開けます(権限は不要)。拡張機能版のデータは、Web版とは別に、拡張機能の中に保存されます。プロジェクトファイルで書き出せば、行き来できます。プラグインのマーケットストアは、拡張機能版では使えません。
🤖 Androidタブレット・スマホ(Chrome)
- Chromeでアプリを開く
- 右上のメニュー(︙)を開く
- アプリをインストール(または「ホーム画面に追加」)を選ぶ
ℹ️ インストール後のこと
- 作ったデータは、インストール前と同じブラウザ内に保存されます。
- 一度開いたあとは、オフラインでも起動できます。
- 更新があると、次に開いたときに新しい版になります。
- データの保管は、上の「定期的にファイルに保存」をお忘れなく。
HOW TO
操作方法
マウス・キーボードでも、iPadなどのタッチ(指とApple Pencil)でも、同じ画面で操作できます。
⌨️ PC:キーボードショートカット
MacはCtrlの代わりに ⌘ です。上の5つはどの図でも使えます。そのほかは、ER図でテーブルやカラムを選んでいるときのものです。
| Ctrl+Space | 図の一覧パネルを開く・閉じる |
|---|---|
| Ctrl+N | 新しい図を作るメニューを開く |
| Ctrl+O | プロジェクトファイル(.webuml)を開く |
| Ctrl+D | 書き出しパネルを開く(PNG・PDF・PlantUML・Mermaidなど) |
| Ctrl+Z | 元に戻す |
| Ctrl+Shift+Z / Ctrl+Y | やり直す |
| Tab / Shift+Tab | 次・前のテーブルを選ぶ |
| ↑ ↓ | 選んだテーブルのカラムを上下に選ぶ |
| Shift+↑ ↓ | 選んだカラムを上下に並べ替える |
| Enter | 選んだテーブル・カラムを編集する |
| Ctrl+Enter | カラムを追加する(編集中も使えます) |
| Delete / Backspace | 選んだカラム・テーブルを削除する |
| Ctrl+C | テーブル名・カラム名をコピー(論理/物理は表示に合わせます) |
| Ctrl+V | コピーしたテーブル・カラムを複製して貼り付け |
| Esc | 編集・メニューを閉じる、選択をやめる |
🖱️ PC:マウス
| 空き地をダブルクリック | 部品(テーブル・ノード・トピックなど)やメモを追加するメニュー |
|---|---|
| 部品を1回クリック | 選んで、編集・追加などのアイコンを出す(線も同じです) |
| 部品・線をダブルクリック | 編集パネルを開く |
| 部品をドラッグ | 移動する |
| 部品の○から別の部品へドラッグ | 線(リレーション・矢印・メッセージなど)をつなぐ |
| Shift(Ctrl)+クリック | 部品を複数選ぶ(シーケンス図ではメッセージも。選んだメッセージは、まとめて上下へ動かせます) |
| Shift+ドラッグ | 四角い枠で範囲選択(シーケンス図のメッセージも) |
| 空き地をドラッグ / ホイール | 画面の移動 / 拡大・縮小 |
| タブをダブルクリック | 図の名前を変える |
📱 iPad・タッチ操作
| タップ | 部品・線を選ぶ(アイコンのバーが出ます) |
|---|---|
| 部品を長押し | 編集する |
| 空き地を長押し | 部品やメモを追加するメニュー |
| 線を長押し | ラベルなどを編集する |
| ドラッグ | 部品を移動する |
| ○から別の部品へドラッグ | 線をつなぐ |
| 2本指でピンチ / ドラッグ | 拡大・縮小 / 画面の移動 |
| 空き地をタップ | 選択をやめる |
✏️ iPad:取り消しと便利な設定
| 元に戻す / やり直す | 画面上部の「取り消し」「進む」アイコン。外付けキーボードなら ⌘+Z も使えます |
|---|---|
| 範囲選択・複数選択 | 画面上部の「選択モード」アイコン(新規プロジェクトの隣)をオンにすると、指やPencilのドラッグで四角い枠の範囲選択に、タップで1つずつの複数選択になります(画面の移動は2本指)。もう一度押すと元の操作に戻ります |
| 指=パン専用 | ☰ メニューでオンにすると、指は画面の移動と拡大・縮小だけに。部品の移動や接続は、Apple Pencilやマウスで行います |
指が誤って図を動かしてしまうときは「指=パン専用」が便利です。
DIAGRAMS
ER図のほかに、28種類の図も
ひとつのプロジェクトの中で、図の種類を混ぜて使えます。どの図も、メモ・元に戻す・やり直し・画像やPDFの出力が同じ操作です。
«file» など)を描けます。レーンは近づけるだけでぴったり並びます。
ER DIAGRAM
ER図の、ここまで描けます
- 論理名／物理名
- 主キー(PK)
- 外部キー(FK)と ON DELETE / UPDATE
- 識別・非識別リレーション
- 1対1・1対N・N対N など
- UNIQUE・CHECK・デフォルト値
- 自動採番(IDENTITY)
- インデックス
- シーケンス
- VIEW
- カテゴリ・背景色
- メモ
- PlantUML・Mermaidのコード出力
データは、定期的にファイルに保存してください
WebUMLのデータは、お使いのブラウザの中(この端末)に保存されます。そのため、ブラウザのデータ削除・端末の初期化・別のブラウザや端末への切り替えなどで、データが消えてしまう恐れがあります。
大切な図は、こまめに .webuml ファイルとして保存しておくことをおすすめします。
- 画面上部の 書き出し アイコン(↓)を開く(Ctrl+D)
- プロジェクトファイル を選んで ダウンロード
- 保存したファイルを、クラウドストレージやGitなど、安全な場所に保管する
保存した .webuml ファイルは、画面上部のフォルダのアイコン(Ctrl+O)からいつでも読み込めます。別の端末にデータを移すときにも使えます。
PRIVACY
図のデータは、外に出ません
作成した図やテーブル定義は、すべてお使いの端末のブラウザ内で処理・保存されます。サーバーへアップロードしたり、第三者へ送信したりする機能はありません。DBダンプの取り込みも、ファイルを端末の外へ出さずにブラウザ内だけで解析します。
※ この紹介ページの「アプリを開く」を押すと、利用者数の集計のため「押された」という合図だけを、ECQのサーバーに送ります(ブラウザごとに1回。個人情報や図のデータは含みません)。アプリの中からは送りません。
※ 画面の表示に使う文字フォントの読み込みと、「プラグインストア」を開いたときのプラグイン一覧・ファイルの取得のために、通信が発生します。図のデータは含まれません。プラグインは外部と通信できない隔離された環境で動作します。
EXPORT
多彩な出力で、そのまま資料に。
画面上部の書き出しアイコンから、形式を選ぶだけ。PlantUML / Mermaid / SysML v2 のコードだけなら、「</>」のコード生成アイコンですぐ表示・コピーできます。
- プロジェクトファイル(.webuml)
- PNG画像(解像度・背景透明を選べます)
- SVG画像
- PDF(文字もそのまま)
- SysML v2 のテキスト(.sysml。SysMLの図)
- PlantUML(マインドマップ・アクティビティ図・状態遷移図を除く全ての図)
- Mermaid(ER図・アクティビティ図・シーケンス図・状態遷移図・マインドマップ、パッケージ図・オブジェクト図・コンポジット構造図・プロファイル図・コミュニケーション図・相互作用概要図・フローチャート・画面遷移図・システム構成図・ガントチャート)
- Markdown(ユースケース定義書・クラス定義書・メッセージ一覧・アウトラインなど)
- PostgreSQLのDDL
- Excelテーブル定義書(.xlsx)
- テーブル定義(Markdown)
- DB差分反映SQL(SQL / Flyway / Liquibase)
画像・PDFはどの種類の図も共通。DDLやExcelなど、ER図向けの出力は、プラグインとして必要なものだけ追加できます。
PLUGIN
自分だけの機能を、足せる。
WebUMLの出力や取り込みは「プラグイン」として作られています。テーブルや図、プロジェクトを受け取って、テキストやファイルを返す小さなスクリプトを書けば、独自のDDL、定義書の書式、他のDBの取り込みなどを追加できます。
プラグインは、アプリ内の「プラグインストア」から入れられるほか、JSONファイルとして自作・共有もできます。
