爆速で作成!コード感覚でフロー図が描けるcode2flow

爆速で作成!コード感覚でフロー図が描けるcode2flow

  • このエントリーをはてなブックマークに追加

プログラムでコードを書く前にプログラムの流れを視覚的に把握するためにフロー図を書くためのツールはいくつかあると思いますが、ドラッグ&ドロップを必要としないでフロー図を描けるWebサービスcode2flowが面白いので紹介したいと思います。

目次

code2flowとは?

code2flowは、Web上でコードを書く感覚で簡単にフロー図が描けるWebサービスとなっています。

ifやwhileを使って簡単に条件分岐も作成でき、作成したフロー図は共有することもできるようになっています。作成自体は簡単なので、プログラマー以外のフロー図を必要とするWebディレクターの方でも簡単に作成することができるようになっています。

サービスの紹介自体はこちら確認できます。
https://code2flow.com/

フロー図の作成手順

簡単な使い方を紹介します。

プログラマーの方なら、この画面を見ればすぐにその仕組みを理解するのにさほど時間はかからないと思いますが、基本的にサイドバーに記述をすることで右側のカラムにフロー図が描かれます。
code2flowの使い方

サイドバーのコードをすべて削除して一から作ってみたいと思います。日本語でも作成できるようになっており、サンプルでは「神楽坂」と入力して最後に「;(セミコロン)」を入力しています。これだけでノードが作成されます。
code2flowにノードを追加

今度は下記のようにifを使って条件分岐を作ってみます。

if (観光?) {
  
} else {
  
}

code2flowのif条件

そしたらifの条件に対してのtrueとfalseの場合の内容を記述します。それっぽいフロー図になってきましたね。
code2flow

コメントを入れることで下記のように補足情報を追加することができます。
code2flowにコメントを追加

以上がざっとした使い方ですが、その他にも文字なんかが装飾できますので、ヘルプをチェックしてみてください。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep Hep!にてeizとして記事執筆中。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation