パスワードを忘れた? アカウント作成
15570448 story
テクノロジー

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が主流になっていくかもしれない。

この議論は賞味期限が切れたので、アーカイブ化されています。 新たにコメントを付けることはできません。
  • Mermaidだと、プログラミング用の図表は描きやすいが、インフラ構成図(AWSなどの記号入り)を書くには向いていないなぁ。

    とはいえ、インフラ構成図に適した記法って何かあるのか?
    • by Anonymous Coward on 2022年02月18日 15時38分 (#4202653)

      PlantUMLの配置図 [plantuml.com]でサーバー構成図とか書いてます。
      が、ガチなネットワーク構成図とか書くのはやっぱり難しいので、あくまで簡単な奴にしか使えない印象。
      他にもっと良いのがあれば自分も知りたい。

      # PlantUMLは並び順が自動(多少は指定できるが数が多くなるとダメ)なので途中で崩れだすのも悩ましい。

      親コメント
      • by Anonymous Coward

        配置をコントロールしたければそのへんのは諦めるしかないと思います…

        結局draw.ioとVisio使ってます。
        #pngとかに吐き出してExcelに貼り付けて送ったり…w

        • by Anonymous Coward

          差分取得がしやすい方が…
          そこまで行くと要素をリンクできたりするといいなぁとか言い出すんだろうな。

          • by Anonymous Coward

            差分取れても目的となる関係が把握しづらい図など作る意味ないでしょw

            • by Anonymous Coward

              エンタープライズアーキテクチャとか言うソフトですらできるぞ。
              マークアップとかマークダウンを人力で書くのがそもそも非現実的というところに戻ってしまう…
              振り出しに戻ったらまた振り出しに戻るまで進むだけ。

      • by Anonymous Coward

        モデルとビューの分離なんて太古から言われているのに
        その概念図すらまともに描けないって微笑ましいよね。

    • by Anonymous Coward

      Draw.ioのxmlを直接(マテ

      # まあ非圧縮xml出力なら一応なんとか…

  • by Anonymous Coward on 2022年02月18日 15時22分 (#4202630)

    Graphviz [wikipedia.org]?

    • by Anonymous Coward

      doxygenのおかげでGraphvizの方が知名度高いと思ったけどそうでもないのかな

    • by Anonymous Coward

      graphvizはシーケンス図が書けないんですよねぇ・・・

    • by Anonymous Coward

      GraphvizでER図の鳥足や〇●つきのArrowってどう描くんだろう?

  • 分岐が増えてくるとメンテが辛くなってくる。
    Officeの図形並べて作ったほうが楽ってぐらいに。

  • by Anonymous Coward on 2022年02月18日 15時22分 (#4202631)

    Markdownで家系図を書けるということか。
    Markdown遺言状とか認められるんかな

    https://github.com/mermaid-js/mermaid/issues/1747 [github.com]

    • by Anonymous Coward

      遺言状で自筆以外でいいのは財産目録部分だけだね。それも印刷して署名押印が必要。
      誰それに~の部分は本文だから、自筆しかダメだろう。

      • by Anonymous Coward

        「〜に書かれてある通りにしろ」って遺言は有効なのかな、とふと思った

        • by Anonymous Coward

          「この遺言書の指示に従ってはならない」

  • by Anonymous Coward on 2022年02月18日 15時31分 (#4202644)

    Mermaidは、作者がMarkdownっぽく図を書くことを目的として作ったもんだし、Makrdownの拡張構文として埋込むのが普通だからな。
    単体で画像出力にも使えるし、Markdown以外でも埋込めるけど。
    同じテキストから画像ってのもPlanetUMLみたいにJavaのアプリで画像を作ってから、Markdownに限定せず他のドキュメントに埋込むのとは取り扱いの簡便さが違うからな。

    UML書くのは PlanetUMLのほうが高機能だけど、こういう埋込み型ではMermaidは強い。

  • by Anonymous Coward on 2022年02月18日 15時40分 (#4202655)

    個人用のRedmineの記述を表の作りやすさからtextileにしてます。使いはじめ頃はMarkdownとtextileの同じぐらいの勢力だったのに周りじゃ絶滅状態。

  • by Anonymous Coward on 2022年02月18日 16時28分 (#4202706)

    MarkdownでMarUpすると図が書けると、、、

    # 気持ちはわかるし便利な面もあるがなんかモヤモヤ

    • by Anonymous Coward

      なににモヤモヤしてるのかも言語化できないのなら何も言ってないのと同じだから黙っといてほしい。

    • by Anonymous Coward

      Markdown言語とは、そもそもMark Up … つまり HTMLのタグ付けを嫌って、簡便化するために生まれたスクリプト言語の一カテゴリーです。
      つまり、Markdown(言語)でMark Up=タグ作成しているのは、人間ではなく、コンパイラ?スクリプトエンジン?側です。

      正しい理解は、

       (人が)Markdown(言語)で(書くと、スクリプトエンジンがSVG言語に)MarUpする(こ)と(で)図が書けると、、、

      では?

      • by Anonymous Coward

        主語を書かずに主体を混同するからもやもやしてるんでしょうね。

  • by Anonymous Coward on 2022年02月18日 17時49分 (#4202773)
    TeXの時代から需要あったと思うけどみんなtgifで書いてEPS埋め込んでたよね。
    • by Anonymous Coward

      やりたいことのレイヤが違うから、一つにはならん。

      Mermaidも出力はsvgで、ブラウザが絵にしてる。
      ユーザーがsvgで書いたって構わんが、手間だからMermaidとか使う。
      Graphvizそのまま使ってもいいけど、dotで書くのが面倒だからPlanetUML使う。
      抽象化されてるPlanetUMLやMermaidでは、イラストを書くのはかなり難易度が高い。
      そういう場合はイメージ編集用のアプリを使うほうが楽だったり、svgでベタに書くだろう。

    • by Anonymous Coward

      > 図形描画言語に決定版がないのは何でなんだろな

      理由は、意味と表現が一体だから。
      文章は、意味と表現が分離されている。
      一方で図は意味と表現が一体である。フォントの大きさ、図形のレイアウト、アラインメント、全てに意味がある。

      • by Anonymous Coward

        少し違うんじゃないか?

        図も最後にはバイナリに落としているんだから、図をコード化出来ないわけじゃない。
        単に、文ではわずかしか必要のない正確な位置情報を文字表現することが、視覚的に並べるより手間がかかる、という話では?

        だから、表現できる範囲(サイズや厳密なレイアウト)に”制限をかけないと”、作図した方が速い、ってことだと思う。
        その制限次第ってだけでしょう。

        制限が厳しいと、あれが書けない、これが書けない、となって、
        制限をなくそうとすれば、PDFになって、手で書きたくなくなる、
        トレードオフでしかない。

        • by Anonymous Coward

          ああ、まさにその通りで、昔はスプライトのドット絵を描くのに、
          イメージを書かずに直接16進を書くこともあった。
          03 C0
          40 02
          80 01
          FF FF
          この程度の量(2進にすると台形)なら、
          皆、読むし、イメージ湧くだろうけど、
          大量に続くなら、読むのを途中で止めてしまうだろう。

  • by Anonymous Coward on 2022年02月18日 19時34分 (#4202828)

    ところでPlantUMLなりMermaid.jsなり、複雑になると自動レイアウトに苦しむことが多くないですか?

    基本テキストで書きつつ、手動でもレイアウトに制約を設けられたら便利だなと思うんですが、そういうのないのかな

    # Diagrams.netの進化に期待
    # 無いなら作れ?はい。。

    • 上でPlantUMLでサーバー構成図書いてるって書いたACだけどマジでそう思います。
      横にずらずら並べるぐらいならいいんですが、サーバー同士の通信を線で引いたりすると、変なとこに移動したり、ぐるっと遠回りする線が引かれたりで困ってしまう。
      こういうの [zenn.dev]で多少の縦横は整理できるけど、複数絡むといろいろ条件があるらしく、結局どっか飛んで行ったり変な線になったりする。)

      デザインこるならdraw.ioとか使えばいいんでしょうけど、気軽さや保守性で言ったらPlantUMLみたいなテキスト系の方が圧倒的だからできればこっちで書きたいんですよね…。
      そういうツールがあるなら、本気で使いたいですわ。

    • by Anonymous Coward
      GitLab の mermaid というとこれですね。 https://about.gitlab.com/handbook/tools-and-tips/mermaid/ [gitlab.com] https://docs.gitlab.com/ee/user/markdown.html#mermaid [gitlab.com]
typodupeerror

犯人は巨人ファンでA型で眼鏡をかけている -- あるハッカー

読み込み中...