LT:PlantUMLを使おう
PlantUMLの紹介(1分)
PlantUMLを使う動機
Scrapboxにきれいな図表を挿入したい
わかるteyoda7.iconcFQ2f7LRuLYP.iconkuroma6666.icon
手書きだとごちゃってしまう
なるべく簡単に図表を作成したい
簡単につくれるものなんだcFQ2f7LRuLYP.icon
現時点でそこそこ使えるもの
PlantUML
UML作成ツール
しかしUML以外の作図もいろいろできる
スイスアーミーナイフ状態スイス・アーミーナイフみたいなもの.icon
機能が多すぎ
ドキュメント読んだだけで疲れちゃう…
Java製
ローカルでもオンラインでも使える
レイアウトエンジンにGraphvizを使っている
かなり良いツール!
雑に書いてもいい感じに配置してくれる
ほかのプロダクトでも使われている
plantuml-proxy
takker.iconさん作
takker.iconさんなんでも作ってるなkumatako.icon
すげーcFQ2f7LRuLYP.icon
制約事項
public project からでないとファイルを読み込めない
外部からURLが見れないと使えない
公式でもproxyが提供されていたことに、随分後になってから気づいた
https://plantuml.com/ja/server
$ http://www.plantuml.com/plantuml/proxy?src=:url&fmt=svg
plantuml-proxy すごく便利
でも使っている人は少ないみたい
たぶん、説明が不十分のため
すまぬtakker.icon
plantuml-proxy の使用例
日記ページのカレンダー表示
ガントチャートです
実は編集できます
編集の仕方を知らないcFQ2f7LRuLYP.icon
suto3.icon以下を参照
PlantUMLでガントチャートをつくる
PlantUMLでカレンダーをつくる
ありがとうございます!cFQ2f7LRuLYP.icon
scrapbox-cheat-sheet
/programming-notes/チートシートを表示するUserCSS
チートシートです
え、これもUMLだったのかcFQ2f7LRuLYP.icon
plantuml-proxy で画像をつくって、Just Monikaのしくみで表示してます
plantuml-proxyの基本的な使い方(2分)
UMLが描けます(書きません)
あまり興味はないでしょう?
状態遷移図
箱と矢印で書く図(これが書きたかった)
自動ドアの状態遷移図自動ドアの状態遷移図.icon
TCPの状態遷移図TCPの状態遷移図.icon
(ネタ)亜空大作戦のテーマ
大好き。これ初めて目にしたときかなり笑ったcFQ2f7LRuLYP.icon*3
これplantumlだったのか~teyoda7.icon
使ってみたいな~と思いつつ調べてなかった
思いついたときに一気に書き上げるのが大事suto3.icon
これcFQ2f7LRuLYP.icon
正気になる前にやり切れinajob.icon
マネジメントサイクルの作図(やってみましょう)
PDCA
OODA(ライブデモ)
リアルタイムだ!
初めて聞いたteyoda7.icon
実は欧米ではooはウ読みするらしいはるひ.icon
/suto3/OODAループ
なんだ…?何をされている…?cFQ2f7LRuLYP.icon
いろいろ拡張機能を使っていらっしゃる
右のところのメニューがたくさんある
Scarpbox らしい使い方(2分)
コードブロック記法
コードブロックにソースを書いて、漸次更新していく
開発環境と実行環境の一体化が良い所
書き、即実行してリリースできる
ページタイトル画像(サムネイル)
サムネイルに要約を表示させる
画像蓋
これ欲しいcFQ2f7LRuLYP.icon
一行要約
全部書いた後で、内容を一行にまとめる
KJ法の用語では「一行見出し」ともいう
Scrapboxだとページタイトルをつけ直すみたいな?yosider.icon
3つの理由
「要点は3つです」と言ってから考えるアレ
3点ルール
例: Scrapboxを使う3つの理由
罪深いタイトル、釣りタイトル
Scrapboxを使う、たったひとつの理由みたいなやつだcFQ2f7LRuLYP.icon
罪深いってそういうことだったのかteyoda7.icon
なるほど、そう出るの良いなはるひ.icon
かけるようになりたさcFQ2f7LRuLYP.icon
PlantUMLを使う3つの理由も必要なのではyosider.icon
つくった suto3.icon
さすが!yosider.icon
PlantUML楽しいよ
Happy Hacking /Icons2/HappyHacking.icon
文字を動かす場合は別のツールが必要
svg-hosting ←これ suto3.icon
👏cFQ2f7LRuLYP.iconyosider.icon
思ったよりおもしろそうだったはるひ.icon
事前感想欄(でいいかな?)
便利そうだなと思いながら全然使っていないwogikaze.icon
ChatGPTも出力してくれるし編集も楽なので取り入れたい
より楽に書けるよう、/takker/PlantUML live editor on Scrapboxを作ろうとしたけど途中で放棄してるtakker.icon
プログラミングで作図するツールは好きinajob.icon
ただPlantUMLはクライアントで実行が完結しないからなーという謎のこだわり
最近調べるとWASMでブラウザでPlantUMLを動かす仕組みがあるらしい
全体的にもっさりしているが、これは興味がある
https://github.com/plantuml/plantuml-core
javaをwasmにするやつを使って動かしているtakker.icon
downloadされるファイル数が多すぎて、もうちょっとなんとかならんのかと思ってしまう
JavaをRustかなにかに書き換えるのが根本的な解決策なんだろうけど、大規模過ぎて困難だろうな
少なくとも一人でできることじゃない
質疑応答
導入したいばあい、まずプロ棋士plantuml-proxyを入れる必要がありますか??cFQ2f7LRuLYP.icon
プロ棋士笑ったteyoda7.icon
書いてしまう、罪深さcFQ2f7LRuLYP.icon
古のネットスラングinajob.icon
ドキュメントが欲しい!cFQ2f7LRuLYP.icon
/takker/PlantUMLファイルから画像URLを生成するserverless function
serverless function なのでツール等のインストールは必要ありません suto3.icon
なんのツール使ってるのか不明だったので、話聞けて「これがPlantUMLか~」となったteyoda7.icon
パブリックプロジェクトの制約を忘れちゃうと大変suto3.icon
プライベートで動かなくて「なんでだろう」と思った事がある
プライベートでも動かせたら便利だけどなぁkutsumofu.icon
+1kuroma6666.icon
セキュリティーに注意!plantuml-proxyからScrapboxプロジェクトにアクセスしてるということinajob.icon
100%文字通りには動かない。あきらめるのも肝心
例:PDCA#620cb6db5b98c20000a23851
時計回りにはなってない
逆の方向に回るようにしようとしてもうまくいかない!
PlantUMLで時計回りに回る図を書く方法が不明
書き方に工夫が必要?kuroma6666.icon
#即興LT練習会