We are ACORN!

プログラムやサーバーの設定など、技術的な記事を載せております。

Javascript プログラミング

MarkDownDiagram

投稿日:2019-01-29 更新日:

マークダウンで画面遷移図などのダイアグラムを作れるツールをブラウザベースで作ってくださった方がおられます。
大変重宝していて、業務で使いまくりです。
https://github.com/wakufactory/MarkDownDiagram

ただ、移動がマウスなので、ちょっとだけ移動したい時に不便でした。特に0.5emだけ移動したいときはドラッグandドロップだと同じ位置になってしまったりしてイラっとします。

それで、カーソルキーで動かせるようにしたバージョンをForkして作ってみました。
https://github.com/ShigeUe/MarkDownDiagram

ダブルクリックshift+クリックすると選択され、カーソルキーで移動できます。ついでにDeleteキーで削除もできます。
(shift+クリックで複数選択して移動できるようにしました。削除は一つだけが選択されていると出来ます)

また、線種もベジェと直線だけでなく、直角線も出来るようにしたり、垂直・水平線も出来るようになっています。
はたまた、zoomとedit部分の領域の広さもlocalstorageに保存しています。

Chromeでしか動作確認してません。firefoxだと選択時の枠線がズレてましたね(笑)
ie、edgeは動きません。

-Javascript, プログラミング


comment

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

さくらのレンタルサーバーのメールをslackに通知する

今までメールを自分で作ったスクリプトで携帯に転送していたんですが、キャリアメールをやめたのでslackにメッセージを投げることにしました。 前提として、プランがスタンダードである必要があります。 何せ …

【qmail】携帯キャリアのメールに添付を削除して転送する

qmailでメールを携帯に転送して、メール通知に使っておられる方は結構多いんじゃないでしょうか。 ただ、大きなファイルが添付されていると、エラーメールが送信元に戻ってしまいます。 つまり、クライアント …

【PHP】DBライブラリ 「idiorm」

フレームワークを使うには簡単すぎる、かといってPDOを使ってガリガリ書くのは面倒。 そんな時に役立つライブラリが「idiorm」です。(なんて読むんでしょうか?) GitHubで公開しています。 ht …

【HTML5】 FormDataオブジェクトがログに出力されない(出力方法追記)

どうも仕様みたいですね。 どうやっても、無理でした。 隠ぺいされたオブジェクトっていうのも気持ち悪いですね。 それをajaxで送る、っていうのも気持ち悪い。 var fd = new FormData …

Google Apps Script でWebAPIを作ろう

Google Apps Scriptを使うと簡単にWeb APIを作ることが出来ます。 準備 まず、Google Drive上からApps Scriptを作れるようにしましょう。 ドライブの左上の「新 …