Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
631
Help us understand the problem. What is going on with this article?
@wakufactory

Markdown風テキストでダイアグラムが描けるWebツール

More than 3 years have passed since last update.

MarkDownDiagram

Markdown風のテキストで、ER図やブロックダイアグラムのようなチャートを描けるツールです。

こちらにインスパイアされて、もうちょっと汎用的にダイアグラムを描けるツールを作りました。

もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った

特徴としては

  • Webブラウザのみでローカルで動作
  • 配置はマウスでドラッグして編集できる
  • CSSで色や装飾を制御可能

といったあたりです。

CgOdrJ7UMAAF44Y.png

githubからclone/ダウンロードして使えます。
オンラインで試すのはこちらでどうぞ。

ローカルでブラウザのみで動作します。index.htmlをブラウザで開いてください。

Chrome推奨ですが、Safari,Firefoxでも動作します。タッチIFは未対応。

機能

  • テキストでブロックを記述し、ブロック間を線で繋ぐ描画
  • ブロックをマウスでドラッグして位置を調整
  • ドラッグした位置はテキストに反映される
  • ブロックは複数行のtableとdivの2種類の要素
  • ラインはSVGのpathで描画
  • ブロックやラインは、cssで装飾できる
  • テキストのファイルへのロードセーブ機能
  • 印刷機能 (現状A4横サイズ固定)

スタイルについて

プリセットcss(css/mdg.css)にいくつか装飾用のスタイルを定義してあります。文字・背景の色、文字サイズ、paddingサイズやボックスの横幅等をクラスで指定できます。詳しくは、mdg.cssを参照してください。

ロード/セーブについて

編集領域のテキストは、ブラウザのlocalStorageに自動保存されます。
LOAD/SAVEは、テキストをそのままファイルから読み込み、ダウンロードします。拡張子は便宜上.mdgとなっていますが、プレーンテキストなのでなんでも構いません。

印刷について

ブラウザの印刷機能で、ワークスペース全体がA4横に収まるようになっています。画像への切り出し等はPDFに落としてからできます。

書式

ブロックの定義

[name] (class) <position>

nameはブロックのIDとして/[a-z0-9-_]+/。classはcssのためのクラス名。positionは自動的に設定される。

ブロックの区切り線

---

複数行に区切られているとtable要素になる。

他ブロックへのリンク

==>[name]

これ自体区切り線としても働く。ブロックの途中にある場合は、その行から線が始まる。

リンクの属性を設定

u<=(class)=>d[name]

classはリンクのSVG pathに適用されるクラス名。デフォルトのリンクはベジェ曲線だが、"S"を指定すると直線になる。
"<",">"は線の矢印を表す。両端に無くてもよい。
"u","d"の部分は、線の接続位置を表す。左が自ブロック、右が相手ブロックの指定。
"u"はブロックの上部中央、"d"は下部中央。"l"はブロックの左で、"r"は右になる。
相手のブロックの"l","r"の場合は、"l2","r1"のように接続先の行を指定することができる。

ブロックのタイトル

table要素で有効

#title

画像ブロック

[name] (image) 
![title](file "caption")

プリセットのクラスとして"image"をブロックのクラスに適用すると、枠なし、背景透明に設定できる。

コメント

// comment

カスタマイズ

css/custom.css にカスタムのスタイルを追加して使用できます。

画像はどこにあっても大丈夫ですが、imgの下に入れるとよいでしょう。

更新履歴

  • 4/25 プリセットcssを整理して追加しました
631
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
631
Help us understand the problem. What is going on with this article?