グリッドとスナップは、いま開いている図面に効きます。
ここで決めたものが、新規作成とこれから引く線に使われます。 すでにある図面や線は変わりません。この設定はアプリに残ります。
ページ・図形・配線・用紙・ケーブルの色・ケーブル識別・グリッド・表示設定・自動保存を、 まとめてまっさらにします。押すと確認が出ます。元に戻せません。
左のパレットからキャンバスへドラッグ。クリックだけでも画面の真ん中に置けます。
グリッド幅は 1 / 2 / 5 / 10 から選べます（既定は 5。手で数字は入れられません）。上のツールバーか、
何も選んでいないときの右パネルで変えられます。
図形の大きさは「2マス単位」で変わります。こうすると図形のセンターが必ずグリッド線の上に来るので、
線を真ん中につないだり、図形どうしを中心でそろえたりがグリッドの上で決まります。
図形の移動（ドラッグ・矢印キー）も2マス単位です。線だけは1マス単位で動きます。
図形の枠線からドラッグすると矢印が出ます。つないだ場所に丸マークができます。辺の真ん中には吸い付きます（少し離すと解除）。
ダブルクリックで横に文字。ドラッグで辺の上を移動。Alt(option)+ドラッグでそこから別の線。矢印を外すと丸マークも消えます。
図形をダブルクリック。押した場所で名称と型番/注記が切り替わります。入力中は Enter＝決定。改行したいときは Shift+Enter（⌘/Ctrl+Enter、option+Enter でも可）。何もない所をダブルクリックすると、その場にテキストが置けます。
右パネルの「不透明度」で、図形も画像も % で薄くできます（Adobe と同じ感覚）。
数字を打っても、スライダーをつまんでも構いません。中の名称やアイコンも一緒に薄くなり、
書き出した PDF / SVG / PNG にもそのまま乗ります。
画像は図形と同じように、縦横比を変えて伸ばせます。
つまみをそのまま引けば自由に、Shift を押しながらなら縦横比を保ったまま。
元に戻したいときは「元の比率に戻す」を押してください。
文字やアイコンを ⌘(Ctrl)+ドラッグ。アイコン→名称→型番の親子で、親を動かすと子もついてきます。 （そのままドラッグすると図形ごと動きます）グリッドには沿わず、図形の上下左右のセンターにだけ吸い付きます（十字のガイドが出ます）。
線をAlt+ドラッグで経由点を追加。直角配線はまっすぐな部分をドラッグしてずらせます。引いている最中は Shift＝直線／⌘(Ctrl)＝自動で回り込む／Alt＝吸着しない。
図形を選んだままパレットをクリックすると、つながった状態で置けます。
矢印が出ていく線が1本あれば、その線の間に入ります（1→2→3 の 2 を選べば 1→2→新→3）。
線が無い図形や終端なら、右へ水平に伸ばしてつなぎます（1→2 の 2 を選べば 1→2→新）。
ほかに、線を右クリック → 線の間に図形を追加、
すでにある図形を ⌘(Ctrl)+ドラッグで線の上に重ねる（割り込める線は点線で光る）でも入れられます。
どれも線の種別や色はそのまま引き継ぎます。
線も動かせます。線の本体をそのままドラッグするか、選んで矢印キーを押すと、線ぜんぶが動きます。
両端が図形につながっていても接続は外れません。
つないでいる場所が図形の辺の上をすべるので、線はまっすぐのまま上下に寄ります
（図形の縁まで来ると止まります）。
上のならびボタンも、図形だけでなく配線に効きます。
ラック間を渡る線を何本か選んで「上下に等間隔」を押せば、まっすぐのままきれいにそろいます。
線が動けるのはつないだ辺に直交する向きだけです
（左右の辺につないだ線は上下、上下の辺につないだ線は左右）。
動かせない向きのときは、その線はそのままです。
線の上の黒い点（区間つまみ）を掴んだときは今までどおり、その区間だけが曲がります。
Alt(option)+ドラッグも今までどおり、掴んだ場所に経由点が増えます。
複数の図形を選んで Ctrl(⌘)+G でグループ。以後はどれか1つを掴めば
かたまりごと動きます。解除は Ctrl(⌘)+Shift+G。
回すときは、選んだ図形の四隅の外側（角のつまみより少し離れた輪）にカーソルを持っていくと
曲がった矢印に変わります。そのままドラッグで回り、Shift を押している間は 15 度きざみ。
右パネルの「回転」に数値で入れることもできます。
まとめて選んだときも、そのまま変形できます。囲みに出るつまみを引けば
中身が同じ比率で大きくなり、囲みの四隅の外側を掴めばまとめて回ります
（Shift はリサイズなら縦横比の維持）。ロックされたものが混ざっているときは出ません。
右パネルの「位置 / サイズ (囲み全体)」で数値でも変えられます。
グループ化は右パネルの「配置」にもボタンがあります。
図形はグリッド2マスまで小さくできます。小さいうちは、つまみが図形を
覆ってしまわないよう四隅の4つだけになります。
キャンバス左上のタブで用紙を何枚も持てます。タブをドラッグで並べ替え。選択中のタブをもう一度押す（またはダブルクリック）で名前を変えられます。
タブを右クリック（または ⋯）で、名前の変更・ページの複製・削除ができます。
消したページは Ctrl(⌘)+Z で戻せます。ページを行き来しても取り消しの記録は消えません。
図面名はページごとに持てます。右パネルの「図面名」も、図面の中に出る名前の札も、
いま開いているページのものです。新しく足したページは、いたページの名前をそのまま引き継ぎます
（「◯◯系統図」のように、あとから一文字だけ直せば済むように）。
名前の札はダブルクリックでその場で書き換えられます。
図形を用紙の外に置くと、用紙の方が広がってカスタムサイズになります。決まったサイズ（A4 横など）のときは毎回確認が出ます。キャンセルすると、はみ出させた操作が取り消されて元の場所に戻ります。
右ドラッグまたは Space+ドラッグ で画面移動。ホイール＝ズーム、⌘(Ctrl)+ホイール＝スクロール。数値の入力欄はクリックしてホイールで増減できます。
左右のパネルは仕切りをドラッグで幅を変えられ、仕切りの小さなボタンでたためます
（ダブルクリックで元の幅）。画面の狭いノート PC では、たたむと作図の場所がぐっと広がります。
たたんだ状態は次に開いたときも覚えています。
保存で .wdraft（図面ファイル）。書き出しから PDF / SVG / PNG / 結線表 CSV。SVG は Illustrator でそのまま開けます。
ページが分かれているときは、書き出しもページごとに分かれます。
SVG / PNG / JPEG は1ページにつき1ファイルで、ファイル名はそのページの図面名。
PDF は1つのファイルの中で1ページ1枚に分かれます（用紙の大きさは1ページ目に合わせます）。
結線表 CSV だけは通しで見たい表なので、1枚にまとめて「ページ」の列を足します。
.wdraft は今までどおり全ページ入りです。
「共有リンクをコピー」を押すと、図面をサイトに預けて
40文字くらいの短いリンクができます。メールやチャットに貼るだけ。
受け取った人はインストールも登録もいりません。
開くと書き出した紙と同じ見た目で表示され、そこから PDF / SVG / .wdraft で保存したり、
「この図面を編集する」で編集画面に移ったりできます。
図面を直してもう一度押すと、同じリンクのまま中身が最新になります。
送り直しがいりません。画像を貼った図面もそのまま渡せます。
| 渡しかた | リンクを1本送るだけ（相手はインストール不要） |
| 見え方 | 書き出した紙と同じ。編集の道具は出ない |
| 直したいとき | もう一度押す。リンクは変わらない |
| 置き場所 | サイトに預かる。リンクを知っている人なら開ける |
| 要るもの | インターネット（つながっていないと作れません） |
| 消えるとき | 3年だれも開かなかったら。開かれるたび期限は延びます |
| 大きさの上限 | 8MBまで。超えたら画像を減らすよう知らせます |
画像を貼った図面は大きくなります。画像は元のファイルの 1.35 倍くらいの大きさで入るので、 8MB の枠に収まるのは元の画像でおよそ 5.9MB ぶんまで （3600px の写真なら 3 枚くらい）。超えたときは、いまの大きさと 画像が何枚入っているかをお知らせします。画像を減らすか、小さいものに差し替えてください。
| 線の本体をドラッグ | 線ぜんぶを動かす（接続は外れない） |
| Alt(option)+ドラッグ | 図形を複製／線に経由点／丸マークから配線 |
| Ctrl(⌘)+D | 複製 |
| Ctrl(⌘)+G | グループ化 |
| Ctrl(⌘)+Shift+G | グループ解除 |
| Delete | 削除 |
| Enter / F2 | 選んだものの文字を編集 |
| 文字入力中の Enter | 決定（Shift / ⌘(Ctrl) / option + Enter で改行） |
| Ctrl(⌘)+0 | 全体表示 |
| Ctrl(⌘)+S / O | 保存 / 開く |
| Ctrl(⌘)+P | PDF で書き出し |
| 矢印キー | 図形は2マス、線は1マスずつ移動（Shift でその5倍） |
| 接点を Shift+ドラッグ | 反対側の接点にそろえる（線がまっすぐになる） |
| 図面名・ケーブル識別 | 図面の中をドラッグで動かせる（右パネルで出し入れ） |
| 図面名をダブルクリック | その場で名前を書き換える（ページごと） |
| L / T / H | 配線 / テキスト / 手のひら ツール |
Drag an item from the palette on the left onto the canvas. A single click also places it in the middle of the view.
The grid size can be 1 / 2 / 5 / 10 (default 5; you can’t type your own number). Change it from the toolbar,
or from the right panel when nothing is selected.
Shapes resize in steps of 2 cells, so a shape’s center always sits on a grid line.
Wires connected to the middle of an edge and shapes aligned by their centers all land exactly on the grid.
Moving a shape (dragging or arrow keys) also goes 2 cells at a time. Only wires move 1 cell at a time.
Drag from a shape’s outline to draw an arrow. A dot appears where it connects. It snaps to the middle of an edge (move a little away to release it).
Double-click a dot to add text beside it. Drag it to slide along the edge. Alt(option)+drag to start another wire from it. Disconnecting the wire removes the dot.
Double-click a shape. Where you click decides between the name and the model / note. While typing, Enter = done. For a new line use Shift+Enter (⌘/Ctrl+Enter or option+Enter work too). Double-click an empty spot to place text right there.
Use Opacity in the right panel to fade shapes and images by %, just like in Adobe apps.
Type a number or drag the slider. The name and icon inside fade too, and it carries over to exported PDF / SVG / PNG.
Images can be stretched to any proportion, just like shapes.
Drag a handle freely, or hold Shift to keep the aspect ratio.
To go back, press Restore original ratio.
⌘(Ctrl)+drag the text or the icon. They are linked icon → name → model, so moving a parent moves its children (a plain drag moves the whole shape). They don’t follow the grid; they snap only to the shape’s horizontal and vertical centers (a crosshair guide appears).
Alt+drag a wire to add a waypoint. On orthogonal wires, drag a straight segment to shift it. While drawing: Shift = straight / ⌘(Ctrl) = route around automatically / Alt = don’t snap.
With a shape selected, click an item in the palette and it is placed already connected.
If the shape has exactly one outgoing wire, the new item goes in between
(select 2 in 1→2→3 to get 1→2→new→3).
If it has no wire or is at the end, the new item is placed to the right and connected
(select 2 in 1→2 to get 1→2→new).
You can also right-click a wire → Insert a shape into this wire, or
⌘(Ctrl)+drag an existing shape onto a wire (wires you can insert into light up with a dashed outline).
Either way the cable type and color carry over.
Wires can be moved too. Drag the body of a wire, or select it and press the arrow keys, to move the whole wire.
Even when both ends are connected to shapes, the connections stay.
The connection points slide along the shapes’ edges, so the wire stays straight as it moves
(it stops at the edge of a shape).
The align buttons at the top work on wires too, not just shapes.
Select several wires running between racks and press “Distribute vertically” to line them up neatly while keeping them straight.
A wire can only move at right angles to the edge it is connected to
(wires on left/right edges move up and down; wires on top/bottom edges move left and right).
If it can’t move in that direction, it stays where it is.
Grabbing a black dot on a wire (a segment handle) still bends just that segment, as before.
Alt(option)+drag still adds a waypoint where you grab.
Select several shapes and press Ctrl(⌘)+G to group them. From then on, grabbing any one of them
moves the whole group. Ungroup with Ctrl(⌘)+Shift+G.
To rotate, move the cursor just outside a corner of the selected shape (a ring slightly beyond the corner handle)
and it turns into a curved arrow. Drag to rotate; hold Shift for 15° steps.
You can also type a value into Rotation in the right panel.
A multiple selection can be transformed as a whole. Drag a handle on the surrounding box
to scale everything in proportion, or grab just outside a corner of the box to rotate them together
(when resizing, Shift keeps the aspect ratio). The handles don’t appear if a locked object is included.
You can also enter exact values in “Position / Size (whole selection)” in the right panel.
There is also a Group button under Arrange in the right panel.
Shapes can be made as small as 2 grid cells. While they are that small, only
the 4 corner handles appear, so the handles don’t cover the shape.
The tabs at the top left of the canvas let you keep several sheets. Drag a tab to reorder.
Click the current tab again (or double-click it) to rename it.
Right-click a tab (or use ⋯) to rename, duplicate or delete a page.
A deleted page comes back with Ctrl(⌘)+Z. Switching pages doesn’t lose your undo history.
Each page has its own title. The Title in the right panel and the title shown on the diagram
both belong to the page you have open. A new page takes over the title of the page you were on,
so you only need to change a word or two.
Double-click the title on the diagram to edit it in place.
Place a shape outside the paper and the paper grows to a custom size. With a standard size (A4 Landscape and so on) you are asked each time. If you cancel, the move is undone and the shape goes back where it was.
Pan with right-drag or Space+drag. Wheel = zoom, ⌘(Ctrl)+wheel = scroll.
In number fields, click and use the wheel to change the value.
Resize the side panels by dragging the divider, and collapse them with the small button on the divider
(double-click to restore the width). On a small laptop screen, collapsing them gives you much more room to draw.
The collapsed state is remembered next time.
Save writes a .wdraft (diagram file). Export gives you PDF / SVG / PNG / a connection list CSV.
The SVG opens directly in Illustrator.
When a diagram has several pages, exports are split by page too.
SVG / PNG / JPEG give one file per page, named after that page’s title.
A PDF has one sheet per page in a single file (the paper size follows page 1).
Only the connection list CSV stays as one table, with a Page column added, since it is meant to be read straight through.
A .wdraft still contains all pages.
Press Copy share link to upload the diagram to our site and get a
short link of about 40 characters. Just paste it into an email or chat.
The recipient doesn’t need to install or sign up for anything.
It opens looking just like the exported sheet. From there they can save it as PDF / SVG / .wdraft,
or switch to editing with “Edit this diagram”.
Edit the diagram and press it again, and the same link shows the latest version.
No need to send it again. Diagrams with images can be shared as they are.
| Sharing | Send one link (nothing to install) |
| How it looks | Just like the exported sheet, with no editing tools |
| Making changes | Press it again. The link stays the same |
| Where it is kept | On our site. Anyone with the link can open it |
| Requires | An internet connection (links can’t be made offline) |
| When it is removed | After 3 years with nobody opening it. Each view extends it |
| Size limit | Up to 8 MB. If it is larger, you are asked to reduce the images |
Diagrams with images get larger. Images take about 1.35× their original file size, so the 8 MB limit holds about 5.9 MB of original images (around 3 photos at 3600 px). If it is larger, you’ll see the current size and how many images it contains. Remove some images or replace them with smaller ones.
| Drag a wire’s body | Move the whole wire (connections stay) |
| Alt(option)+drag | Duplicate a shape / add a waypoint / wire from a dot |
| Ctrl(⌘)+D | Duplicate |
| Ctrl(⌘)+G | Group |
| Ctrl(⌘)+Shift+G | Ungroup |
| Delete | Delete |
| Enter / F2 | Edit the text of the selection |
| Enter while typing | Done (Shift / ⌘(Ctrl) / option + Enter for a new line) |
| Ctrl(⌘)+0 | Fit to window |
| Ctrl(⌘)+S / O | Save / Open |
| Ctrl(⌘)+P | Export PDF |
| Arrow keys | Shapes move 2 cells, wires 1 cell (Shift: 5×) |
| Shift+drag an end point | Line it up with the other end (straightens the wire) |
| Title / Cable legend | Drag to move them on the diagram (show or hide them in the right panel) |
| Double-click the title | Edit it in place (per page) |
| L / T / H | Wire / Text / Hand tool |