学習方法

「ASCIIフローチャート」ツールをお勧めします-GraphEasy



Recommend Anascii Flowcharttool Graph Easy



私はこの「ASCIIテキスト」を「知識」ウェブサイトのコンソールで直接何度も見ました。

前回、私は背の高い記事「サーバーレス戦闘：個人の読書追跡システムの作成」を利用していました Insights.thoughtworks.cn/serverless-… 時間、
内部にフローチャートがあります：



当時、私は「ASCIIテキストフローチャート」を描くこともできると思っていました。それをコードコメントとしてコードに直接入れて、「強制」をアップグレードすることはできますか？

インターネット検索には、コードやコマンドラインから実装でき、直接コピーして貼り付けることもできるツールが本当にあります。これは、私のプログラムなどの要件を完全に満たしています。-GraphEasy



簡単にグラフ化

Graph :: Easyは、グラフィックDSLを処理するPerlモジュールです。次の機能があります。

  1. 理解しやすく、読みやすいグラフィカルな記述言語を提供します
  2. ASCIIアートをサポートするグリッドベースのプレーサー
  3. Graphviz、VCG（コンパイラグラフの視覚化）、GDL（グラフ記述言語）、およびGraphML形式にエクスポートできます。
  4. 画像はGraphviz、VCG、GDLからインポートできます。

抜粋： www.gitbook.com/book/weishu…

要するに、GraphEasyは非常にオタクな描画ツールです。これはコマンドラインに基づいているため、ASCII文字マップを簡単に描画してHTMLやSVGなどにエクスポートできます。



GraphEasyをインストールする

自己使用のMacノートブックなので、インストールは簡単です。コマンドは3つだけです。

// 1. brew install graphviz // 2. Install cpan, all the way 'Enter' cpan // 3. Install Graph Easy sudo cpan Graph:EasyCopy code

グラフを簡単に使用

1.1。 シンプルに：

$ graph-easy <<< '[a]->[b]'Copy code

出力：

+ --- + + --- +
| a | -> | b |
+ --- + + --- +

二。 長いチェーンに来てください：

% graph-easy <<< '[a]->[b]->[c]->[d]->[e]'Copy code

出力：

3.3。 ブランチに来てください：

% graph-easy <<< '[a]->[b]->[c][b]->[d]->[e]'Copy code

出力：

四。 閉ループに来てください：

% graph-easy <<< '[a]->[b]->[c]->[b]->[d]->[e]'Copy code

出力：

5.5。 合流点に来る：

% graph-easy <<< '[a]->[b]->[c][d]->[e]->[b]'Copy code

出力：

6.6。 プロセス間で説明する必要があります

% graph-easy <<< '[a]->[b]->{label:'true'}[c]->[d]->{label:'FeedBack'}[a]'Copy code

出力：

例：ノードbからノードcは、条件の説明を追加する必要があります。

7。 もちろん、フローチャートを上から下に描く必要がある場合もあります。

% graph-easy <<< 'graph{flow:south}[on]->[ ]->[ ]'Copy code

出力：

8.8。 フローチャートが複雑な場合は、内容をファイルに保存してから、ファイルのフローチャートを読むことができます。

% graph-easy ../test.txtCopy code

'test.txt'の内容を見てみましょう：

9.9。 最後に、以下のフローチャートを実装しましょう

test.txt内：

[Instapaper] {size: 2,7} [RSS(Feedly)] -> [Instapaper]{ origin: RSS(Feedly) offset: 2,0} [WeChat] -> [Instapaper]{ origin: WeChat offset: 2,-6} [Website] -> [Instapaper] [IFTTT]{size: 1,7} [Instapaper] -> [Diigo]{ origin: Instapaper offset: 2,-2} [Instapaper] -> [IFTTT]{ origin: Instapaper offset: 2,0} [Instapaper] -> [Evernote]{ origin: Instapaper offset: 2,2} [Webtask(Serverless)]{size: 2,7} [IFTTT] -> [Webtask(Serverless)]{ origin: IFTTT offset: 2,0} [Webtask(Serverless)] -> [Github]{ origin: Webtask(Serverless) offset: 2,-2} [Webtask(Serverless)] -> [ZenHub]{ origin: Webtask(Serverless) offset: 2,2}Copy code

総括する

時間の関係のため、各ノードの相対的な位置とサイズは適切に調整されておらず、上記と完全には一致していませんが、少なくとも「ASCIIフローチャート」を描くことができます。

コードエディタにコピーして、注釈の効果を確認してください。

気持ちいいです、試してみてもいいです~~~

「終了」

Coding01今後ともよろしくお願いいたします。

QRコード

ご覧いただきありがとうございます。

QRコード