Digital Acorn

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

Javascript プログラミング

MarkDownDiagram

投稿日:2017-04-19 更新日:

マークダウンで画面遷移図などのダイアグラムを作れるツールをブラウザベースで作ってくださった方がおられます。
大変重宝していて、業務で使いまくりです。
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からsyslogを書く

忘備録です。 PHPでシステム回りを作っているんですが、syslogに出力出来たらなー、と思っていました。 調べたら簡単♪ function logger($mes) { exec("/bi …

Visual Studio CodeでBoW上のPHPをデバッグ

2019/01/15 設定が古くなっていたので、更新しました。 前書き Sublime Text 3を愛用しているんですが、だんだん他のエディタが追いついて、追い抜いて来たような感じがします。 Sub …

【PHP】 全角記号のときmb_strwidthが1を返す

PHPで全角の判断に、mb_strwidthを使っていました。 mb_strwidth == (mb_strlen*2) だったら全角文字、みたいな。 そうしたら、「◎」を入れたらうまくいかないとクラ …

エディタに最適なフォント

わたしはsublime text 3を使っています。 フォントをいろいろ探し回っていたんですが、結局「MS ゴシック」に戻ってしまいます。なぜなら、どれもフォントの描画がきれいでなく、横棒と縦棒の太さ …

PHP入門講座を公開します

PHPの入門講座を作り始めました。 基礎編が大体出来たので、公開してしまいます。 URLはこちら! https://jw7.org/php_lesson/ 引き続き「活用編」を作って行きます。 ここで …

広告