CSSで簡単に作れる!フローチャート&ダイアグラム9選【タイムライン、家系図風など】

流行なのかタイムライン風のフローチャートなどを、最近色々なサイトで見られます。
画像を使用すればあっという間に作る事が出来ますが、スタイルやJSを使ってとなると色々とややこしいですよね。

そこで今回はCSSやJSなどで簡単に作れるフローチャートをご紹介します。
きっとコーディングの参考になりますよ!

SVGフローチャート

See the Pen SVG flowchart by Bill Kroger (@BillKroger) on CodePen.


マーメイドシーケンス図

See the Pen Mermaid Sequence Diagram by Antti Nyman (@atnyman) on CodePen.


シンプルなCSSフローチャート

See the Pen CSS FlowChart by Emil Devantie Brockdorff (@Mestika) on CodePen.


CSSレスポンシブフローチャート

See the Pen CSS Layout & SVG Practice by Gabriele Corti (@borntofrappe) on CodePen.


DSGN100 – E&P フローチャート

See the Pen DSGN100 – E&P Flowchart by Kwchang (@demonwhite) on CodePen.

リストタグを使用したツリービュー

See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen.

Bootstrap判定フローチャート

See the Pen Bootstrap Determination Flowchart by Melanie Sumner (@melsumner) on CodePen.

ブロックダイアグラム(家系図風)

See the Pen Menu parent children as a diagram… by François Lesenne (@francoislesenne) on CodePen.

横型ブロックダイアグラム(家系図風)

See the Pen CSS Horizontal Family Tree by Peiwen Lu (@P233) on CodePen.