HTML,CSSでフロー図を作成したい

HTMLとCSSでフロー図を作成したいのですが、
検索をかけてもヒットしません。

「フロー図　HTML」とかで検索をかけているのですが…。
図のようなものを実現したいと思っています。

四角の箇所はHTMLでdivタグで囲ってやり、
CSSで枠線を表示してあげれば良いのは解るのですが、
線を結ぶように表示する場合の実現方法が分かりません。

ソースを知りたいのはもちろんですが、
実現出来るような検索方法　またはサイトを教えていただけますでしょうか。

行動規範の内容に同意します

回答3件

ベストアンサー

「フロー図 CSS」のほうが見つかると思います。

【CSSで簡単に作れる！フローチャート＆ダイアグラム9選【タイムライン、家系図風など】 | WebDesignFacts】
https://webdesignfacts.net/entry/css-flowchart/

投稿2019/01/31 15:21

総合スコア69625

2019/01/31 15:27

ありがとうございます！ CSSの方で検索することが抜けていました。助かります。

行動規範の内容に同意します

Atom / Visual Studio Code 向けの plugin、Markdown Preview Enhanced で作図して、html export するといい感じのモノが出来上がります。

投稿2019/01/31 15:38

退会済みユーザー

総合スコア0

plantuml + vscode でフローチャートなどを書くことも検討してみると良いです。

投稿2019/01/31 22:18

総合スコア22328

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問をすることでしか得られない、回答やアドバイスがある。