mermaidのグラフの矢印を直角直線にしたい
podhmoissueはある
podhmo描画の依存関係
podhmoおそらくd3
podhmopackages配下にあるとか教えてほしいよな…
podhmoパーサーとランタイムは別っぽい
podhmoフローチャートはこの辺？
podhmoエントリーポイントはどこなんだろ？どこかでparser呼んでrenderer読んでるイメージ。
podhmo何かrendererが2つある
- packages/mermaid/src/diagrams/flowchart/flowRenderer.js
- packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
たぶんv2が使われてる
podhmoもとに戻ってエントリーポイントを探すか。
このrender付近っぽい。
どうやらmermaidAPIというのがファサードっぽい。
parseもあった
podhmoエントリーポイント探しという意味ではinitialize()っぽいな。
<body>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
addDiagramsでそれぞれの図を追加している。
あとはやっぱりfreezeされてるmermaidAPIのparseとrenderを見れば良いのだろう。
podhmoやっぱり描画はrenderの中で行われていてrendererのdrawが呼ばれてるんだな。
flowchartだとこの辺か。
podhmoワークアラウンド
flowchartだけは対応できるみたい。
podhmoIt looks using
d3module to draw graph. So I tried wheter otherd3curves may work, and found otherd3curve names are available without any Mermaid.js lib modification.Curves
step,stepBeforeandstepAfterare close, but no cigar. It would need more work :(
podhmoパーサー
- packages配下
- 各種diagrams配下
にある。たぶんパッケージ配下のものがコアライブラリ。
podhmoelkって何？
eclipse layout kernelっぽい
podhmodirectivesで色々いじる
そういう時にはレンダラーをdagreベースのものからelkベースのもの(elkjs)に変更してやると解決することがあります(ただしVersion9.4以上)。
%%{
init:
"flowchart": {
"defaultRenderer": "elk",
"curve": "basis"
}
}%%
利用できそうなconfigは
podhmo試してみる string | "dagre-d3" | "dagre-wrapper" | "elk"
%%{init: { 'logLevel': 'debug', 'theme': 'dark', 'flowchart': {'curve': 'liner'} } }%%
flowchart LR
x --> y
x --> z
%%{init: { 'logLevel': 'debug', 'theme': 'dark', 'flowchart': {'defaultRenderer': 'elk', 'curve': 'liner' }} }%%
flowchart LR
x --> y
x --> z
elk関連のissue
podhmoたくさんの設定が存在しそう
podhmo冒頭のissueのflowchartをelkなどで描画してみる。
graph LR
A[Christmas] -->|Get money| B(Go shopping)
B --> C(Let me think)
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
default
curve=liner
elk
elk with curve=liner