Scrapboxがmermaid.jsをサポート

inajob.icon

知らぬ間にmermaid.jsサポートしていたのか、いいね！

code: mermaid

graph LR

HELLO --> WORLD

W --> WORLD

ふむ、サムネイルにはならないのか、残念　suto3.icon

円グラフ（パイチャート）が使いやすそう

code: pie.mermaid

pie title あなたは貧乳派ですか巨乳派ですか

"貧乳が好き" : 5

"巨乳が好き" : 10

"おっぱいならなんでも好き" : 85

パイのパイチャート基素.icon

！！！！？！？！？！！！？！！！！？？？takker.iconwogikaze.icon*5mtane0412.icon

先越されたああああああああああああああああああああああああああああああああああああああああ！！！！！！！！！！！！！！！！！！

くやしい！！

まあいいやUIパクろう

パクってScrapRunを作りました

へー基素.iconuvoa.icon久住哲.icon

biwa.icon

code:branch.mermaid

gitGraph

commit

branch develop

commit

checkout main

merge develop

commit

おお、これはいいね。幅が広がる。

suto3.icon

mermaid.jsをサポートして、すごい、うれしいという記事は山のように出てきそうだけど、

一旦、引いて考えてみると、mermaid.jsをどう使えばいいの？（記法を覚えるのではなく、記法を使ってどんなコンテンツを生産できるのか）

わりと、使い方の応用編は見ない気がする

使うと良さそうな例を見つけたら書いてみるinajob.icon

2 hop linkを理解してなかった

リビングの配線、何らかの構成図

情報インプットと知的生産のフロー

状態遷移図による設計

Windowsにおけるターミナルやインタラクティブシェルの関係

→Windowsのターミナル

/jee54321/Mermaid Syntaxに何ができるか一覧されててわかりやすいtakker.icon

CSSを別のコードブロックで指定できるのかな？

Scrapboxにおけるmermaid.jsの使い方をまとめておきたい

どうすればいいだろう？

とりあえず、 #mermaid.jsの使い方というハッシュタグでまとめてみる

wogikaze.icon

いつものstyle.css

Mermaid記法のプレビューにborderを表示するUserCSS

2024-02-23 lintとformatをしたper_terra.icon

code:style.css

.mermaid-preview svg {

border: 2px solid #efefef;

border-radius: 5px;

}

https://gyazo.com/3a4c1bc39ecf0f8f4e64b3cd4f2d2463https://gyazo.com/347b431a598d713d840a1aeba4bff79b

あり/なし

どこクリックできるかがわかりやすくなるやつ

hatori.icon

コードブロック記法のすぐ下に箇条書きできない問題に気付かず、しばらく混乱した

対策は↑にある通り