これは「Kyoto.bioinfo Advent Calendar 2022」の記事です。（あまり最近バイオインフォやってないのでなんとかひねり出したものです。バイオインフォ要素は薄いですがご容赦ください。）
TL;DR
こういうツールを作りました、っていう話です。
https://strelka145.github.io/works-static-pages.github.io/diagram_maker/diagram_maker.html
はじめに
分野によると思いますが僕はよくノートやスライド用に融合タンパクのこんな図を作ったりします。
いつもはパワポで頑張って作っていたんですが急いでいるときに限って
「文字の位置が揃ってない」
「リンカーの長さが揃ってない」
とか非本質的なことが気になって時間を浪費してしまいます。同じような図を作るんだったらもう自動化しちゃえばいいじゃんということでこのツールを作成しました。
（このツールを作ったのも金曜に迫る進捗報告用のスライド作成中に図が気になりだして「スライドを作らないといけない」という現実逃避も兼ねて1週間で作られたものです）
使い方
ある程度直観的に分かるようにsampleが入力されていると思いますが一応説明します。
基本的な使い方
1 | [ABC]-[DEF]--[GHI] |
こんな感じで[]に囲まれた文字列が四角に入ります（ただし文字列前後の空白文字は無視されます。）。四角と四角の隙間の間隔は[]と[]の間の-の数で制御できます。-が無い場合は四角と四角は隣接します。
ひとつながりの図を複数行に分けて記述することは出来ません。
塗りつぶす
四角を塗りつぶすには以下のように記述します。
1 | [hoge $#ffffff] |
[]で囲んだ文字列の後にスペース+$を入れて#から始まるカラーコードを入力します。この色指定はwebカラーなのでカラーコード（#ffffffetc）の代わりにred,yellowなどで色名を直接指定することも出来ます。またメニューから色を指定してカラーコードをコピーすることも出来ます。
フォントの大きさを変更する
1 | #fontsize=20 |
と入力することでこれ以降の図のフォントサイズが20に変更されます。
直線の太さを変える
1 | #linethick=10 |
と入力することでこれ以降の図の直線の太さが10に変更されます。
その他
#padding_x (or) #padding_y
文字とその枠線の間隔を調節出来ます。
#margin_x (or) #margin_y
図と図や図と枠の間隔を調節出来ます。
最後
バグや要望がありましたらこちらにissuesでも投げてください。
スライド作りに追われている中現実逃避のためにこのツールを作りました。またwebアプリにしたのはその方がなんとなくインパクトありそうだなと思ったからで、慣れないjavascriptで頑張りました。そんなjavascript初心者が作ったツールなのでコードは読みにくいし参考にもならないと思います。
あと一人でちょっとしたツールを作ると変数名や関数名が適当になりがちなので今回関数名や変数名の多くはChatGPTを利用して名前をつけてもらいました。コーディングAIはライセンスの問題とか色々あるみたいですがこういう用途でAIが補助してくれるのは便利でいいですね。