Mermaid Graphical Editorを使うとVSCodeでサクサク図が書けるよ

技術記事は はてなブログ へお引越ししました。 興味を持ってくださった方はZennではなくこちらをご購読いただければと思います🙏 Mermaid Graphical Editor VSCodeの拡張機能です。 Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。 逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。 vs Draw.io Integration 類似ツールとしてDraw.io Integrationがあります。 こちらは.drawio拡張子のファイルをVSCodeで作成すると、draw.ioのエディタが開いて作図ができるツールです。 しかし、draw.ioはあくまで図が書けるところを生業としていて、作成したdraw.ioファイルをマークダウンファイルに埋め込むには画像と

[tettekete37564]

draw.ioってたしかmermaid書式インポート出来るんだよね。mermaidで書いてて複雑化してきたり、機能不足を感じてきたらdraw.ioに移行ってのができる。/ 解説あった→ https://www.drawio.com/blog/mermaid-diagrams

[tengo1985]

ファイル形式を.drawio.svgにすればエクスポートせずにそのまま画像としても扱えて編集もできる。コードで扱いたい場合は別だけど。 https://link-and-motivation.hatenablog.com/entry/2023/10/11/120000

[room661]

VSCodeでしか読めないMarkdown文書になっちゃうのはヤだなあ。PDFエクスポート前提なら良いがREADME.mdなんかにMarmaidで書くのはアカン。

[honeybe]

↓※ ノーマルのmermaid形式っぽいから「VSCodeでしか読めない」ってことはないよね。純粋な(？)markdownじゃないって意味でもVSCode関係ない

[tmatsuu]

よいのではないか。わいわい

[Hazel]

mermaid手書きは結構面倒だったからいい

[arrowKato]

mermaidをGUIでグリグリいじれる。

[kowa]

これは論理構造であって図ではないような

[Goldenduck]

ブコメの補足助かる

[kiyo_hiko]

"千夏先輩は大喜が好きで、雛も大喜が好きで、大喜は千夏先輩が好き" なんかPrologみたいだなあ

[meonal]

mermaidをGUIでやるのは本末転倒かと最初は思ったけどgithub copilotで最初にある程度作れるってとこで相性かなりいいね

[kimuraxtax]

Mermaid は Obsidian でも使えるよ

[okinawazenzai]

面白そう。近いうちに触ってみよう。今はPlantUMLでSVGで出力してimgタグで読み込むみたいな原始人みたいな事やってる

[big_and_small]

正直あまり自分ではmermaid形式は使わないので、必要な時はweb上のeditorを使ってた

[nomakkah]

うちではsphinxからmermaidを利用してる

[strawberryhunter]

すごくいいけど、何かバグっているのかわからないけど使いにくかった。