チャート図(組織図とか)をHTML + CSSのみで生成するやつを作った

業務で組織図のようなチャート図?を作る必要があり、ライブラリも探しましたが良さそうなものがなかったので生成してみました。

JS系のフレームワークで何かしら操作することを想定したので、HTMLを追加するだけで勝手にマップを広げてくれるような設計を考えました。

んで、できたものがこちら

CSSのみの実装ですが意外といい感じに作れて個人的には満足です。一つ一つのBOXの大きさを変えたい場合はCSSで書き換えたり、クラスを付与することで大きさを帰ることができますが実際に検証をした訳ではないんで未確認です。

例によってソースコードはcode sandbox

そしてデモサイトはこちらです。

何かしらにお役立てください〜。

Social Share Button