cles::blog

GitHub の Markdown が Mermaid 形式をサポートするようなのでメモ。

Mermaid は以前、取り上げた PlantUML と同様にフローチャートや UML の画像を生成して埋め込むための DSL です。これでイチイチ画像を生成して Markdown に貼り込む必要がなくなるのでメンテナンスも楽になりますね。

Include diagrams in your Markdown files with Mermaid | The GitHub Blog

Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser.

Markdown のリポジトリと Live エディタは以下にあります。

• mermaid-js/mermaid: Generation of diagram and flowchart from text in a similar manner as markdown
• Online FlowChart & Diagrams Editor - Mermaid Live Editor

チェンジビジョンが 9/26 で astah* community の提供が終了になることを告知しています。
配布終了後もライセンスに従って使い続けられるようですが、インストーラーの再配布は禁じられているので、欲しい場合には提供終了までにダウンロードしておく必要があります。

astah* community | UMLモデリングツール | Astah

平素より、弊社製品をご愛用いただきまして誠にありがとうございます。
2018年9月26日をもちましてastah* communityの提供を終了致しますことをご案内させていただきます。

JUDE や astah は（Rational ROSEが買えないので）一時期はかなりの人が使っていたと思いますが、現在は UML の普及も一段落していますし、最近はちょっと書くくらいであれば Cacoo などのサービスも充実してきていますから、無料版で裾野を広げるというのも割に合わなくなっているのかもしれません。

これまでにも DSL を使ってソフトウェア設計のための図式言語を記述できるツールについては「yUML」や「MarkDownDiagram」、「Webgraphviz」などを紹介しましたが、多数の図式言語に対応した「PlantUML」というツールを見つけたのでメモ。

リアルタイムに動かすことができるオンラインジェネレータも用意されているので、あれこれと試行錯誤しながら作成できるのがいいですね。

† 画像の例

実際の DSL は以下のような感じになっています。

アプリを作成するときに DB は無くてはならない存在ですが、DB は運用していく中でスキーマに少しずつ変更が加えられていくことがあります。そうなると、ドキュメントとの乖離が生じていて、大きなバージョンアップをしようとしたときにドキュメントが役に立たなくて困るという経験をした開発者も多いと思います。

それを防ぐことができるのが、この SchemaSpy というツール。
その名のとおり、DB からスキーマ情報を引っこ抜いて Graphviz 的なもので可視化してくれるという OSS ツールです。

SchemaSpy

Document your database simply and easily

出力は HTML のようなので、CI なんかと組み合わせると良いかもしれないですね。

Markdown っぽい表記をすると、それに対応する ER 図のようなものが書ける Web ツール 「MarkDownDiagram」が面白そうだったのでメモ。確かにこれならばプログラム等で構造を解析するのは楽なので、使いようによってはかなり面白い使い方ができそうですね。

• Markdown風テキストでダイアグラムが描けるWebツール - Qiita
• MarkDownDiagram
• wakufactory/MarkDownDiagram

久し振りに astah* professional を使ってみたら思いのほか機能が増えていたのでメモ。

astah* professional - ソフトウェア設計支援ツール

ダイアグラム
　・UML2.x
　　　クラス図（オブジェクト図、パッケージ図）、ユースケース図、シーケンス図、アクティビティ図、コミュニケーション図、ステートマシン図、コンポーネント図、配置図、合成構造図
　・マインドマップ
　・ER図
　・フローチャート
　・CRUD
　・データフロー図（DFD）
　・要求テーブル
　・要求図

いつの間にかマインドマップとか、DFDのようなUMLでないものまで含まれるようになっていたんですね。

UML はいろいろな使い方があると思いますが、僕は今のところ UML をコンパイルするような使い方はしていなくて、要は設計用のメモにしか使っていない状態です。紙やホワイトボードの落書きのままだと共有するのに不便なので、電子化することになりますが、そのような清書する用途でこれまで Astah* とつきあってきました。こういう使い方だと無償版の astah* community で十分なので、正直、有償版の professional の機能がどうなっているか全く追いかけていなかったんですよね。いい機会なのでこのさいみっちり使ってキャッチアップしておきたいと思います。

簡単なUMLやネットワーク図を書いたりするときには PPT や Visio を使うのが標準的ですが、他人に配布するとなると困るので、これまでに Dia や Dynamic Draw のようなツールを探してきましたが、それに並ぶツールとしてオンラインで使うことができるCacooというサービスを見つけたのでメモ。

Cacoo - Web上で図の作成とリアルタイムコラボレーション - 機能

Cacooはブラウザだけで誰でも簡単に美しい図を作成することできるサービスです。
図を共有して複数人で同時編集したり、作成後に公開して利用する可能です。

TwitterやGoogleとアカウントを連携できるのでアカウントの開設は一瞬でできるようになっています。試しに図を何枚か書いてみましたが、エディタの部分も思ったより良くできているので驚きました。図をエクスポートしたり共同編集エディタとしても使えるようなので、ちょっとしたプロジェクトの場合にはこれで済ませてしまうと、ファイルをメールで添付したりする必要がないので、新しい仕事のやり方ができるかもしれません。

ただ、無料版は保存できる図が25枚までという制限があるので、本格的に使うには有料版にせざるを得ないですね。
どこが開発してるのかなと思ったら Backlog と同じヌーラボなのですね。

ちょっと前にテキストからUML図を生成してくれる『yUML』が良く出来ているというエントリがあったので、ちょっと試してみたのですが確かに良くできています。

テキストからUML図を生成してくれる『yUML』が良く出来ている - IDEA*IDEA ～ 百式管理人のライフハックブログ ～

システム開発でUML図をよく書く人には便利そうなツールのご紹介。yUMLを使えばテキストからUML図をさくっと生成することができます。

フォームから入力して図を生成、自在に貼り付けることもできますが、秀逸なのはSimpleAPIちっくにimgタグに直接記述できる点。良く出来ていますね。

ノード同士の関係を列挙してあげると、レイアウトは自動的に設定してくれるようです。


http://yuml.me/diagram/scruffy/class/[CustomerRegistory]<>1-0..*>[Customer],[Customer]1-0..*>[Address]

JUDEとかを使うまでもない時に重宝しそうです。

実はまだ持っていなかったので、第２版を先週買ってしまいました。

モデリングについての本でこのボリュームにまとまっているのが非常に助かります。
初級～中級向けみたいな書き方ですけど、見た目よりはレベルが高めな気がします。