GitHub、Markdownで図を描けるMermaidに対応 39
ストーリー by nagazou
表現力 部門より
表現力 部門より
あるAnonymous Coward 曰く、
GitHubは14日、README.mdファイルなどで用いられているMarkdown構文で図を描くことができる「Mermaid」と呼ばれる記法に対応したことを発表した（公式ブログ, Publickeyの記事, Gigazineの記事, Codezineの記事）。
Mermaid記法を用いると、テキストから、フローチャート、シーケンス図、クラス図、ステート図、ER図、ガントチャート、パイチャート、ユーザージャーニーなどの図を自動生成することができるという。具体的には例えば以下のような構文で、A→B/C→Dのようなフローチャート等を書くことができる。
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
その他にも各地に既に多くのサンプルが上がっているが、これまでMarkdownに図を埋め込む場合は、別途画像ファイルを生成してそれを参照するしかなかったので、これがMarkdown内で完結するのは大変便利であろう。この手のテキストから図を生成する仕組みは他にもPlantUMLなどが存在するが、GitHubの採用を受けて今後はMermaidが主流になっていくかもしれない。
インフラ構成図を書くのは難しいな (スコア:2)
とはいえ、インフラ構成図に適した記法って何かあるのか？
Re:インフラ構成図を書くのは難しいな (スコア:1)
PlantUMLの配置図 [plantuml.com]でサーバー構成図とか書いてます。
が、ガチなネットワーク構成図とか書くのはやっぱり難しいので、あくまで簡単な奴にしか使えない印象。
他にもっと良いのがあれば自分も知りたい。
＃ PlantUMLは並び順が自動（多少は指定できるが数が多くなるとダメ）なので途中で崩れだすのも悩ましい。
Re: (スコア:0)
配置をコントロールしたければそのへんのは諦めるしかないと思います…
結局draw.ioとVisio使ってます。
#pngとかに吐き出してExcelに貼り付けて送ったり…w
Re: (スコア:0)
差分取得がしやすい方が…
そこまで行くと要素をリンクできたりするといいなぁとか言い出すんだろうな。
Re: (スコア:0)
差分取れても目的となる関係が把握しづらい図など作る意味ないでしょw
Re: (スコア:0)
エンタープライズアーキテクチャとか言うソフトですらできるぞ。
マークアップとかマークダウンを人力で書くのがそもそも非現実的というところに戻ってしまう…
振り出しに戻ったらまた振り出しに戻るまで進むだけ。
Re: (スコア:0)
モデルとビューの分離なんて太古から言われているのに
その概念図すらまともに描けないって微笑ましいよね。
Re: (スコア:0)
Draw.ioのxmlを直接(ﾏﾃ
# まあ非圧縮xml出力なら一応なんとか…
なにそれ、 (スコア:1)
Graphviz [wikipedia.org]?
Re: (スコア:0)
doxygenのおかげでGraphvizの方が知名度高いと思ったけどそうでもないのかな
Re: (スコア:0)
graphvizはシーケンス図が書けないんですよねぇ・・・
Re: (スコア:0)
GraphvizでER図の鳥足や〇●つきのArrowってどう描くんだろう？
ちょっとしたフローチャートを描く分には便利だけど (スコア:0)
分岐が増えてくるとメンテが辛くなってくる。
Officeの図形並べて作ったほうが楽ってぐらいに。
これで (スコア:0)
Markdownで家系図を書けるということか。
Markdown遺言状とか認められるんかな
https://github.com/mermaid-js/mermaid/issues/1747 [github.com]
Re: (スコア:0)
遺言状で自筆以外でいいのは財産目録部分だけだね。それも印刷して署名押印が必要。
誰それに～の部分は本文だから、自筆しかダメだろう。
Re: (スコア:0)
「〜に書かれてある通りにしろ」って遺言は有効なのかな、とふと思った
Re: (スコア:0)
「この遺言書の指示に従ってはならない」
Markdown特化 (スコア:0)
Mermaidは、作者がMarkdownっぽく図を書くことを目的として作ったもんだし、Makrdownの拡張構文として埋込むのが普通だからな。
単体で画像出力にも使えるし、Markdown以外でも埋込めるけど。
同じテキストから画像ってのもPlanetUMLみたいにJavaのアプリで画像を作ってから、Markdownに限定せず他のドキュメントに埋込むのとは取り扱いの簡便さが違うからな。
UML書くのは PlanetUMLのほうが高機能だけど、こういう埋込み型ではMermaidは強い。
textileは少数派 (スコア:0)
個人用のRedmineの記述を表の作りやすさからtextileにしてます。使いはじめ頃はMarkdownとtextileの同じぐらいの勢力だったのに周りじゃ絶滅状態。
つまり (スコア:0)
MarkdownでMarUpすると図が書けると、、、
# 気持ちはわかるし便利な面もあるがなんかモヤモヤ
Re: (スコア:0)
なににモヤモヤしてるのかも言語化できないのなら何も言ってないのと同じだから黙っといてほしい。
Re: (スコア:0)
Markdown言語とは、そもそもMark Up … つまり HTMLのタグ付けを嫌って、簡便化するために生まれたスクリプト言語の一カテゴリーです。
つまり、Markdown(言語)でMark Up=タグ作成しているのは、人間ではなく、コンパイラ？スクリプトエンジン？側です。
正しい理解は、
(人が)Markdown(言語)で(書くと、スクリプトエンジンがSVG言語に)MarUpする(こ)と(で)図が書けると、、、
では？
Re: (スコア:0)
主語を書かずに主体を混同するからもやもやしてるんでしょうね。
図形描画言語に決定版がないのは何でなんだろな (スコア:0)
Re: (スコア:0)
やりたいことのレイヤが違うから、一つにはならん。
Mermaidも出力はsvgで、ブラウザが絵にしてる。
ユーザーがsvgで書いたって構わんが、手間だからMermaidとか使う。
Graphvizそのまま使ってもいいけど、dotで書くのが面倒だからPlanetUML使う。
抽象化されてるPlanetUMLやMermaidでは、イラストを書くのはかなり難易度が高い。
そういう場合はイメージ編集用のアプリを使うほうが楽だったり、svgでベタに書くだろう。
Re:図形描画言語に決定版がないのは何でなんだろな (スコア:1)
> ユーザーがsvgで書いたって構わんが、手間だからMermaidとか使う。
これは「ユーザーがhtmlで書いたって構わんが、手間だからMrkdownとか使う」をそのまま図形に適用したものだよね
Re: (スコア:0)
> 図形描画言語に決定版がないのは何でなんだろな
理由は、意味と表現が一体だから。
文章は、意味と表現が分離されている。
一方で図は意味と表現が一体である。フォントの大きさ、図形のレイアウト、アラインメント、全てに意味がある。
Re: (スコア:0)
少し違うんじゃないか？
図も最後にはバイナリに落としているんだから、図をコード化出来ないわけじゃない。
単に、文ではわずかしか必要のない正確な位置情報を文字表現することが、視覚的に並べるより手間がかかる、という話では？
だから、表現できる範囲（サイズや厳密なレイアウト）に”制限をかけないと”、作図した方が速い、ってことだと思う。
その制限次第ってだけでしょう。
制限が厳しいと、あれが書けない、これが書けない、となって、
制限をなくそうとすれば、PDFになって、手で書きたくなくなる、
トレードオフでしかない。
Re: (スコア:0)
ああ、まさにその通りで、昔はスプライトのドット絵を描くのに、
イメージを書かずに直接16進を書くこともあった。
03 C0
40 02
80 01
FF FF
この程度の量（2進にすると台形）なら、
皆、読むし、イメージ湧くだろうけど、
大量に続くなら、読むのを途中で止めてしまうだろう。
GitLabでは前から出来たので対応してくれて有り難い (スコア:0)
ところでPlantUMLなりMermaid.jsなり、複雑になると自動レイアウトに苦しむことが多くないですか？
基本テキストで書きつつ、手動でもレイアウトに制約を設けられたら便利だなと思うんですが、そういうのないのかな
# Diagrams.netの進化に期待
# 無いなら作れ？はい。。
PlantUMLの自動レイアウトには悩まされる (スコア:0)
上でPlantUMLでサーバー構成図書いてるって書いたACだけどマジでそう思います。
横にずらずら並べるぐらいならいいんですが、サーバー同士の通信を線で引いたりすると、変なとこに移動したり、ぐるっと遠回りする線が引かれたりで困ってしまう。
（こういうの [zenn.dev]で多少の縦横は整理できるけど、複数絡むといろいろ条件があるらしく、結局どっか飛んで行ったり変な線になったりする。）
デザインこるならdraw.ioとか使えばいいんでしょうけど、気軽さや保守性で言ったらPlantUMLみたいなテキスト系の方が圧倒的だからできればこっちで書きたいんですよね…。
そういうツールがあるなら、本気で使いたいですわ。
Re: (スコア:0)
Re:名称ポリコレ不可避 (スコア:1)
Re: (スコア:0)
まあ、まいど！って言っただけなのにポリコレのターゲットにorz
Re: (スコア:0)
ちょっと何言ってるのかわからないですね。
Re: (スコア:0)
頭よさげなスカスカ俯瞰
Re: (スコア:0)
よくわからない話題で無理矢理イキるとこういう空虚な文章になるんかね
開口一番の「頭の悪い」が良い味だしてるな