朝霞市在住のWEB系エンジニアかあさんのPHPメインの雑記帳

ITかあさん

最新記事

Marmaid.jsで書くシーケンス図

mermaid.jsで描くシーケンス図

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0028-11-25-12-42-20

無料のシーケンス図作成ツールでかあさん史上最強(多分)

以前当ブログでも紹介したmermaid.jsが素敵すぎて今DFDやらシーケンス図の作成にはmermaid.jsを愛用。
自分はブログで紹介した通り、Atomエディタの中でパッケージ追加してエディタの中でプレビューして使ってますが、
オンラインエディタも用意されているのですぐ使ってみようという方はオンラインエディタもおすすめ。

もちろんオンラインエディタで作った図をPNGやSVGでダウンロードも出来ます。

何回かに分けてmermaid.jsで作れるUMLの紹介をしていきたいと思います。

今回はmermaid.jsで作るシーケンス図について。

基本のシーケンス図

2つのオブジェクトがあり、メッセージの送信とそれに対するレスポンスというシンプルなシーケンス図をサンプルに用意しました
シーケンスサンプル

オブジェクトは最初に定義するのではなく、
A->B というようにアロウを用意してあげるだけで2つのオブジェクトが画面上に用意されます。
ですからシーケンスを書く時はどこのオブジェクトに送るかを意識するだけでシーケンス図を書くことが出来ます。

オブジェクトとオブジェクトを繋ぐアロウの書き方

表示 表記 要素
A->>B: message メッセージ
A–>>B: message 応答
A–xB: message 応答 終了
A-xB: message メッセージ 終了
A-B: message 実線のみ(アロウなし)
A–B: message 点線のみ(アロウなし)
Note right of [A]: message [オブジェクト]の右側にメモ

データの送り先を自分自身にすることも出来ます。

複合フラグメント

複合フラグメントの種類とはループやif、ブレイク、処理の中断、相互作用などデータの流れだけでは表現仕切れない高度(?)な処理を表現するのに使います。
mermaid.jsで簡単に書くことが出来ます。

複合フラグメントをmermaid.jsで書く際注意することは必ずループやifの複合処理では終わりに必ずendで終わりを示してあげることです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0028-11-25-12-40-25

表示 表記 要素
loop loop … 〜 end 「…」はループ名 ループ
alt alt … 〜 else … 〜 end 条件分岐
opt opt … 〜 end オプション

複合フラグメントの入れ子

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0028-11-25-12-42-20

mermaid.jsで実現できないこと

簡単なシーケンス図はmermaid.jsで作れますが、より厳密なUMLにのっとった書き方はできないようです。
例えば
・ライフラインの消滅
・同期/非同期
・ファウンドメッセージ
・ロストメッセージ

複合フラグメントに関してはメッセージの流れを囲ってあげるだけだから全て実現できる(はず。。全部やってないのであれですが)

作業ブランチ間違えた!git stashで退避の使い方まとめ

あ。作業ブランチ間違えた!git stashで退避の使い方まとめ

git

忘れてしまいがちなgit stash

commit checkout add が利用頻度高いgitのコマンドかな。
私はその次によく使うコマンドがgit stashでして、

ッアー!作業ブランチ間違えたー!

っていう時に使えます。

stashをして変更分を退避して移動したブランチでcommitをする

STEP1:git stashで一時退避

git stash

or

git stash save "message"

git stashだけでも良いですが、stashに名前をつけて複数 退避させたコードがあると管理しやすいです

STEP2(1):checkoutして退避したコードをマージ

git stash popで最後に退避させたコードをマージすることができます。

git checkout your-branch-name
git stash pop

STEP2(2):stash番号を指定して退避したコードをマージ

最新の退避コードではなく、複数の退避させたコードのうち、番号または名称を指定してマージする方法です

stash一覧を確認
git stash list
stash@{0}: WIP on your-branch-name3: 652br4e あああああ
stash@{1}: WIP on your-branch-name2: wwde12e いいいいい

stash番号を指定してマージ

git stash pop stash@{1}

基本的な使い方は、stashして退避させ、正しいブランチに移動してからstash pop で退避したものを戻します。

その他使いどころとして、まだ実装方法が明確に決まっていない時に仮で作ったものを一時的にとっておくという使い方もできますね。

その他 stashの使い方

退避コード一覧

git stash list

以下コマンドの【】の中はlistで表示されたstash番号を指定

退避のファイルの一覧

git stash show 【stash番号】

git stash show stash@{0}

退避の変更内容を表示

git stash show -p 【stash番号】

(git diffのように表示される)

退避の削除

//全削除
git stash clear
//全削除
git stash drop 【stash番号】

git stash drop stash@{0}

AtomエディタでシーケンスもDFDもガントチャートも書ける!?mermaid.js

AtomエディタでシーケンスもDFDもガントチャートも書ける!?

みなさんエディタは何使ってます?私はここ2年くらいはAtom使ってます。WindowsにもMacにもLinuxでも使えるから大好き。

シーケンスもDFDもガントチャートも書けるmermaid.js

mermaid.jsはJavaScriptで作られたシーケンスやフローチャート、Ganttもこれ一つで全部作れる素敵ライブラリです。

mermaid.js 記法

graph LR
A–>|text|B

untitled-mmd
けれども あろうことか私DFDなんかはエクセルで作ることに慣れてしまったため、astah* UMLみたいなドラッグ&ドロップでフロー図が作れるWEBツールを探してたんですが、
Atomのアドオンでmermaid.jsがプレビューできるパッケージがあるというので早速インストール。
(これアドオンにしようと思った人、天才なんじゃなかろうか)

Atomで使えるなら、mermaid.jsやるっきゃない!

まだダウンロード数それほど多くないようですが、使いやすいです

使い方

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0028-11-09-14-13-13
パッケージ追加後、Atomエディタ上で右クリック→Mermaid Previewでプレビューが立ち上がります。
後の記法についてはmermaid.jsの公式を確認するのがいいです。

サンプル

untitled-mmd2

sequenceDiagram

participant Alice

participant Bob

Alice->John: Hello John, how are you?

loop Healthcheck

John->John: Fight against hypochondria

end

Note right of John: Rational thoughts prevail…

John–>Alice: Great!

John->Bob: How about you?

Bob–>John: Jolly good!

untitled-mmd3

gantt

dateFormat YYYY-MM-DD

title Adding GANTT diagram functionality to mermaid

section A section

Completed task :done, des1, 2014-01-06,2014-01-08

Active task :active, des2, 2014-01-09, 3d

Future task : des3, after des2, 5d

Future task2 : des4, after des3, 5d

section Critical tasks

Completed task in the critical line :crit, done, 2014-01-06,24h

Create tests for parser :crit, active, 3d

Future task in critical line :crit, 5d

Create tests for renderer :2d

Add to mermaid :1d

来月あたりからまた設計やドキュメントがメインの仕事になりそうなのでUMLツール調べていたけれど、
エディタで管理することに爽快感を感じるとは!
確かにエディタで管理することが容易だとgitでのバージョン管理も容易だし、
Atomでそのままマークダウンでドキュメントを書くのにも使いやすいかも!
mermaid.js 記法が独特だから今後ブログにもまとめて行こうっと。

Mac OSの.DS_Storeはグローバルに.gitignoreで永久にコミット対象外に

.DS_Store もう.gitignore毎回書くのやめません?

めんどいわー、うっかり.gitignore漏れてたわー。コミット入っちゃったわー
そんな.DS_Storeは.gitignore_globalで永久にcommit対象外だ!
そもそもMac環境でなければ.DS_Storeは発生しないわけだし、それって.gitignoreに書いてcommitする意味ある?毎回書いててめんどくさい。
そんな時には.gitignore_globalで永久にcommit対象外とします。

ホームディレクトリに.gitignore_global作成

$vi ~/.gitignoreglobal

.DS_Storeを記載

gitへ設定

(見づらいんですが、ハイフンは2つです)

$git config –global core.excludesfile ~/.gitignore_global

gitへ設定

(見づらいんですが、ハイフンは2つです)

$git config –list
core.excludesfile=/Users/itkaasan/.gitignore_global

listに先ほどの.gitignore_globalがあればOK.