恐ろしい図マーメイドを使用します.js

今日私は最近発見した素晴らしい図書館を共有したい.複雑なソフトウェアのダイアグラムを作成するには、適切なツールを使用していない場合、時間がかかるとトリッキーすることができます.最も最近の構造を示すために図を維持することは、闘争でありえます.最も一般的な試みの一つはdiagram.netです.

このWebアプリケーションでは、ユーザーがページ上の要素をドラッグ＆ドロップすることができます.私の経験では、このアプリケーションを作成するには長い時間がかかる本当に美しいグラフを作成することができます.

私の捜索はそこで行われなかった.私は、要素の発見、サイズ変更、および多くの時間の名前を変更するよりも、図の作成、バージョン管理、および簡単なインターフェイスの速度を導入することを目指しています.これは私がMermaid

このライブラリはJavaScriptで書かれており、Markdownのような構文を使用して図の作成を行うことができます.マーメイドは次の図を作成できます

フローチャート

シーケンス図

クラス図

州図

エンティティ関係図

ユーザー旅行

ガント

円グラフ

要件図

人魚を使用する利点のいくつか.js
コードとしてグラフをつくる

スタイリングの時間を節約している

グラフ

あなたのグラフを制御している

バージョン

図のような他のライブラリとの簡単な統合.ネット

起動するには、「vkcode」の「MarkdownプレビューMermaidサポート」拡張をインストールできます.

次に、希望するコードベースに図のディレクトリを作成します.最後に、“AppaCount Diagram . md”のようなマークダウンファイルを作成します.あなたのエディタの右端(またはShift +コマンド+ VのMac用)側に小さな(オープンプレビュー)アイコンを選択します.これでファイルを編集する準備ができました.簡単な例から始めましょう.
次に、マーメイドを使用したフローチャートを示します

    graph TD;
            A-->B;
            A-->C;
            B-->D;
            C-->D;

マーメイドコードは、「マーメイド」タグでコードスニペットとして入力されるべきです.各文字は、エッジを介して接続されているノードを表します.
the mermaid websiteには図作成のサンプルがたくさんあります.私はフローチャートを作成している間、私のために働いていたセットアップをデモするつもりです.

<!-- ```mermaid
flowchart Guide
    direction TB
    f[flow]
    s[[Step]]
    i([input])
    d[(Database)]
    Parameters>Parameters]
``` -->
<!-- Resource: https://mermaid-js.github.io/mermaid/#/ -->
<!-- Look at the graph here: https://mermaid.live -->
<!-- Connect to diagrams.net: https://www.diagrams.net/blog/mermaid-diagrams -->

```mermaid
flowchart LR
    subgraph Guide
        direction TB

        f[flow]
        s[[Step]]
        d[(Database)]
        Parameters>Parameters]
    end

    %% add in-line style
    Guide:::someclass
    classDef someclass fill:#f96;


    %%list of parameters
    p1>bank_name]
    p2>seller_info]


    %%list of steps
    s1[[1-withdraw_money]]
    s2[[2-purchase_bike]]


    %%list of flows
    f1[go_to_bank]
    f2[withdraw_from_atm]
    f3[contact_seller]
    f4[trade_bike]


    %%list of databases
    d1[(reads: customer_identification)]
    d2[(reads/writes: customer_balance)]
    d3[(writes: e_document_sign)]


    %% Create the step flows
    s1-.->s2;


    %% s1 flow
    p1-->|inputs|s1
    s1-->|calls|f1
    f1-->|calls|f2
    f2-->d1
    f2-->d2


    %% s2 flow
    p2-->|inputs|s2
    s2-->f3
    f3-->f4
    f4-->d3
\```

また、PNGやSVGとしてグラフをエクスポートできます.また、グラフにマーメイドからグラフを転送する方法についてはmermaid.liveチェックアウトすることができます.NETは(すべての人魚の機能をサポートしていません.
私は、あなたがこのチュートリアルを楽しんだことを望みます.あなたのコメントを表現してください.
宜しく
エルファン