ハンズオンで採取した時系列メモからマークダウン(Markdown)機能を使ってレシピを構築することを試みた筆者だったが(記事)、よりビジュアライズされたものを使ってみようと思った。OSSで開発されている図表現Mermaidである。以前こちらで紹介したが、

```mermaid
flowchart LR
ToDo ==>釣り===ツーリング
ToDo ==>筋トレ===トレイル
```

とした図をマークダウンで作成できる。これを#でアウトラインするテキストから簡単に作り出せるとよさそうだと考えたのだ。

前回、使ったメモから工程を書き出したテキストファイル(file.txt)は以下のようなものだ。

# 時系列●●工程レシピ

## デスクトップに事前に5個のファイルを準備(ローカルPC/約30分)

・フォルダの中にそれぞれ画像ファイルとテキストを用意(アップロードをしやすく)  
・画像は縦横比を維持したまま横600pxで  

## ログイン(SaaS/クラウド)

>・ログインURL：https://test/login/  
>・アカウント名：●●  
>・ID：●●  
>・PASS：●●  

### 過去作成分をひな形に複製して編集する(SaaS/クラウド約30分から40分)

1.過去設定分から検索で探す  
2.過去設定分に複製ボタンあるので複製  
3.設定名を作成し、とりあえず「作成済みで保存」(ブルーで選択状態になってる/途中で消されないように先に3を行う)  
4.HTML/Textそれぞれで編集保存。

## ●●(SaaS/クラウド約15分から20分)

## 確認作業(ローカル/約15分、待機時間●●分)
### メールで報告
(都度探すのに時間かかる。事前にコピーしておくとベター)  
担当   
●●@●●.jp  
●●@●●.jp  

### Excel表チェック入れる
https://https://test/excel
### チャットで確認報告
チャットURL  
https://https://test/excel

テキスト保存された上記(file.txt)からPowerShellを使って主要見出しである##にある文字列をとって、ToDo ==>釣り===ツーリングにあてはめる。

$flow = ""
foreach ($line in (Get-Content file.txt | Where-Object { $_ -match '^##[^#]' })) {
    $deleteline = $line -replace "^##", ""
    $flow += "$deleteline ==> "
}

$flow = $flow -replace "==> $", ""
$flow = $flow -replace "\(", "" -replace "\)", ""
$flow = $flow -replace "（", "" -replace "）", ""
$flow = $flow -replace "●", ""
$flow = $flow -replace "、", "" -replace "。", ""

$memo = @"
``````mermaid
flowchart TD
$flow
``````
"@
Set-Content "memo.md" $memo -Encoding UTF8

foreachループとGet-Content file.txt | Where-Object {}を使って抜き出すが、正規表現の#の個数設定がむつかしい。'^##[^#]'で行頭の2個でそれ以上はマッチしないを設定し、そのまま書き出されるとMermaidではノード認識しないので$deletelineで削る。$flow +でMermaidのノードを繋ぐ"==>"を挿入する。

その後-replaceで事後的に出るエラーから見出しキーワードでNGとなるものを省いている。筆者の環境のMermaidでは、見出し語に句読点や・●や()などがあるとエラーになる。これを、そぎ落とすのに秀丸エディタ上でのMermaid実行で試行錯誤した。できるだけ、約物を見出しに使わないことを心掛けたいところだ。

精錬した$flowを@""@のヒアドキュメントに入れて、マークダウンファイルmemo.mdとして書き出す。

file.txtのあるフォルダで上記PowerShellスクリプト(flow.ps1)を実行すると、

  • レシピであるfile.txtと同一階層にflow.ps1を設置し、実行するとmemo.mdが作成される

    レシピであるfile.txtと同一階層にflow.ps1を設置し、実行するとmemo.mdが作成される

これをMermaidが動作するエディタで実行する。筆者の場合は、秀丸にマクロサイトで配布されているHmMarkdownSimpleServerを使っている。

  • 秀丸でのMermaid実行の様子

    秀丸でのMermaid実行の様子

  • flowchart TDをLRにした横表示

    flowchart TDをLRにした横表示

###の小見出し以下を拾えるとさらに充実してくるのでいつかチャレンジしたいところだが、現状でも実際のメモから書き出した工程にMermaid図をキャプチャーとして入れてもいいし、さらなる右脳を使ったMermaidノートとして活用することで、対象となる工程とMarmaidの双方への理解が進むであろうと思った。