Flowchart Diagram (BlockDiag)

View as Markdown
Open in ChatGPT Open in Claude

BlockDiag can be used to create flowchart-style diagrams by leveraging its node shapes, branching edges, and styling options.

Flowchart Diagram
diagram admin {
  top_page [label = "Top page"];

  foo_index [label = "List of FOOs"];
  foo_detail [label = "Detail FOO"];
  foo_add [label = "Add FOO"];
  foo_add_confirm [label = "Add FOO (confirm)"];
  foo_edit [label = "Edit FOO"];
  foo_edit_confirm [label = "Edit FOO (confirm)"];
  foo_delete_confirm [label = "Delete FOO (confirm)"];

  bar_detail [label = "Detail of BAR"];
  bar_edit [label = "Edit BAR"];
  bar_edit_confirm [label = "Edit BAR (confirm)"];

  logout;

  top_page -> foo_index;
  top_page -> bar_detail;

  foo_index -> foo_detail;
               foo_detail -> foo_edit;
               foo_detail -> foo_delete_confirm;
  foo_index -> foo_add -> foo_add_confirm -> foo_index;
  foo_index -> foo_edit -> foo_edit_confirm -> foo_index;
  foo_index -> foo_delete_confirm -> foo_index;

  bar_detail -> bar_edit -> bar_edit_confirm -> bar_detail;
}