diagrams.net(draw.io)で描いた図をWEBページに埋め込む
こんにちは。今回はdraw.ioで描いた図をWEBページにSVG形式で埋め込む方法を解説していきたいと思います。
概要
突然ですがdraw.ioで描いた図をWEBページで公開したいと思ったことはありませんか？例えば以下のようなシーンが思い浮かぶと思います。
- ホームページに説明用の図をつけたい
- wikiに画像で説明を加えたい
- ブログにかっこいい図をつけたい
このような場合に、draw.ioで図を描くと、簡単にWEBページに図を埋め込むことができます。
埋め込み手順
draw.ioで以下のような図を作成してみました。
この図を埋め込んでみたいと思います。
draw.ioのメニューから[ファイル]→[埋め込み]→[SVG]とクリックします。すると以下のダイアログが表示されます。
[ライトボックス]のチェックは外してください。このチェックを外さないと、元の図形データを誰かが編集することができてしまいます。チェックを外したら[埋め込み]ボタンをクリックします。
埋め込むコードが表示されます。[コピー]をクリックすると表示されているコードがクリップボードにコピーされます。
あとはコピーしたコードを自身のWEBページに埋め込んでください。
先程紹介した画像を実際このブログにも埋め込んでみました。以下に表示されている画像が埋め込んだ画像になります。コードを貼り付けるだけでちょうどよいサイズで表示してくれています。
まとめ
今回は、draw.ioで作成した図をWEBページに埋め込む方法を解説しました。すぐにできて便利なので使いみちは多いと思います。是非試してみてください。