Diagrams

https://www.researchgate.net/figure/221536150_fig3_Figure-8-A-SVG-interactive-class-diagram-generated-by-Blur-a-visualisation-tool-from-a
http://www.graphviz.org/content/resources
http://modeling-languages.com/javascript-drawing-libraries-diagrams/
https://css-tricks.com/how-to-make-charts-with-svg/
http://www.vertabelo.com/blog/technical-articles/clinic-management-system-data-model

See javascript-flow-diagram-tools

What are tools for creating diagrams?

  1. Gliffy: https://www.gliffy.com/products/confluence-plugin/
  2. Draw.io: https://marketplace.atlassian.com/plugins/com.mxgraph.confluence.plugins.diagramly/cloud/overview
  3. Lucidchart: https://marketplace.atlassian.com/plugins/com.lucidchart.confluence.plugins.lucid-confluence/cloud/overview
  4. Microsoft Visio
  5. Dia

What are different type of diagrams?

  1. UML class diagram
  2. Entity Relationship diagram
  3. Process flow diagrams / Railroad diagrams

How can we read railroad diagrams?

The rules for interpreting these diagrams are simple:

1. You start on the left edge and follow the tracks to the right edge.

2. As you go, you will encounter literals in ovals, and rules or description
   in rectangles.

3. Any sequence that can be made by following the tracks is legal.

4. Any sequence that can not be made by following the tracks is not legal.

5. Railroad diagrams with one bar at each end allow whitespace to be inserted
   between any pair of token.  Railroad diagrams with two bars at each end
   do not.

See chapter 2 of "JavaScript: The Good Parts" for examples.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License