tldraw - ブラウザやVS Codeから利用できるドローツール

S 20211123 134340

仕事や日常生活を送る上で、ちょっとした図を書くツールがあると便利です。

本日紹介する「tldraw」はそのような用途に便利な、コンパクトなお絵かきツールです。Webベースで動作するので、PCのブラウザや、タブレット、スマホなどさまざまなデバイスから素早く利用することが可能です。

書いた図形は、拡大、縮小、回転などの操作が可能で、結果をファイルとして保存できるほか、SVGやJSON形式でクリップボードにコピーすることもできます。また複数人による作業にも対応しています。

MITライセンスが採用されたオープンソースソフトで、ソースコードがGitHubで公開されています。

以下使用方法を説明します。

目次

tldrawの使用方法

tldrawを使用するにはtldraw.comにアクセスするのが簡単です。

S 20211123 134551

▲画面の下の描画ツールのを利用して図形を描くことができます。描画ツールにはフリーハンドの線、消しゴム、四角形円、矢印、文字、付箋などが準備されています。

S 20211123 134654

▲左端の「…」アイコンをクリックして、図形の描画位置の変更が可能です。選択モードで図形を複数選択して、左右、上下の端に整列させることもできます。

S 20211123 134730

▲作業結果を残したい場合画面左上のメニューから「File > Save」を選ぶと、.tldr形式でファイルを保存することができます。「Edit > Copy as SVG」あるいは「Edit > Copy as JSON」でコンテンツをSVGあるいはJSON形式でコピーすることができます。コピーした後テキストエディタなどを利用して保存することができます。

VS Codeの拡張機能も準備されています。

S 20211123 144847

Marketplaceでtldrawの拡張機能をインストールすると、.tldr形式のファイルが読み書きできるようになります。詳細はこちらで説明されています。

まとめ

tldrawはシンプルで使いやすいお絵かきツールです。PCやスマホ、タブレットなどさまざまなデバイスから素早く使用することが可能です。

よかったらシェアしてね!
目次
閉じる