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

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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

関連記事

【PHP】 Macからの日本語名ファイルを正しく扱う

久しぶりに仕事ではまりました。 ファイルをアップロードして、その日本語名を利用するシステムなのですが、Macも含まれます。 それで、会社からMac miniを借りてダウンロード、アップロード実験をして …

margin?padding?

HTMLコーディングでの余白の付け方

HTMLコーディング初学者で良くあるのが、カンプからHTMLにするところまではうまく行くものの余白の付け方がうまく行かない、ということかもしれません。 余白をどのように付ければ良いのでしょうか。

スクリーンリーダーの利用を意識したコーディング

インターネットを閲覧している人は様々です。中には目の見えない方もいらっしゃいます。 そういった方にも情報を伝えるためには、HTMLを正しくコーディングしていく必要があります。 いくつか考えてみましょう …

PHP Toolkit のSoapClientが接続できない

クライアントがPHPのバージョンを5.4から5.6にアップデートしたそうです。 (そういう時は前もって連絡ください(怒)) その際、エラーが出るというのです。 ログを見ると、 SoapClientの_ …

【WSL】PHPから送信するメールをテキストに保存する

テスト環境で使っていると、PHPのメール送信をテストしたい時があります。 かといって、実際に送信されてしまうと面倒です。 xamppにはmailtodiskというのがあり、メールをディスクに保存してく …