Skip to content

Mermaid Guide.md

Latest commit

 

History

History
171 lines (109 loc) · 5.85 KB

Mermaid Guide.md

File metadata and controls

171 lines (109 loc) · 5.85 KB

🧜‍♀️ Mermaid

[toc]

What is Mermaid?

Mermaid is a way to render diagrams including Flowcharts, Sequence Diagrams, State Diagrams, Class Diagrams, Gantt Charts, and Pie Charts in Markdown editors like Typora and Zettlr. In all honestly, this should be part of Github Flavored Markdown.

What is UML?

UML or Unified Modeling Language is a standard for rendering Flowcharts, Sequence Diagrams, State Diagrams, Class Diagrams, and Gantt Charts used as part of software development. Generally, these are used organize data and how a program should be planned.

Flow Charts

A flow chart shows the logical sequence of steps that a process follows. You'll see a lot of these in my notes. They are useful for describing logical structures as well as for decision making.

🔶 DECISIONS : One of the biggest problems with Flow Charts is how programs processs them. If you write a long question, there will be a rediculously large diamon occuping the diagram. So It might be better to make your flow charts with a list decribing the questions outside of the flow chart.

🔧 Sorta fix: You can use <br/> as a line break to help reduce the size of the diamond.

🎗️ TODO: A rhombus is generally more acceptable to represent flowchart decisions. See if there is a way to reduce the height or moderate the width of the rhombus individually.

  • Question 1 = "Do you want to build a snowman?"
graph TB
	Start["Start"]
	Stop["Stop"]
	Q1{"Question 1"}
	A1("Horray!")
	A2("OK, bye.")
	
	Start --> Q1
	Q1 -->|"Yes"| A1 --> Stop
	Q1 -->|"No"| A2 --> Stop
Loading

See this link.

For more information about flow charts, read this PDF.

Alternatively, give Flowgorithm a try.

Sequence Diagram

A sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

sequenceDiagram

	% TCP Connection Establishment
	participant A as HostA
	participant B as HostB
	A ->> B : SYN
	B ->> A : SYN-ACK
	A ->> B : ACK
	
	% TCP Connection Termination
	participant C as HostA
	participant D as HostB
	C ->> D : FIN
	D ->> C : ACK
	D ->> C : FIN
	C ->> D : ACK
Loading

See this link.

Class Diagram

Probably the most important type of diagram you will see throughout my documentation, a class diagram, describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and their relationships among objects.

Class diagrams are the main building blocks of object-oriented mondeling. It is used for general conceptual modeling of the structure of the application, and for the detailed modeling translating the models into programming code. Class diagrams can also be used for data modeling. (For example, class diagrams can be used for modeling SQL databases as an alternative to Entity-Relationship diagrams). The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.

🎗️ TODO: Put an example diagram here.

Relationships

🎗️ TODO: You may want to move this section later.

Inheritance: Patient is a Person

classDiagram
class Person {
	title : String
	givenName : String
	middleName : String
	familyName : String
	/name : FullName
	birthDate : Date
	gender : Gender
}
class Patient {
	^title : String
	^name : FullName
	^birthDate : Date
	admitted : Date
	/age : Integer
	gender : Gender
	allergies : String[*]
}
Person <|-- Patient
Loading

ℹ️ NOTE: Some UML Editors will show the inhertance arrow as black (filled) instead of white (not filled). They mean the same thing.

Inherited items can be omitted in the child classes, or the can be included but prefixed with a carrot (^). I prefere to omit inherited properties as writing them is redundant.

🧜‍♀️ Mermaid Quirk: Some of the property attributes that are in Mermaid are not in Typora. There's been a push to get Typora as well as the developer of Zettlr to implement mermaid and with these standard features which are part of the UML standard.

See this link for futher developments.

State Diagram

🎗️ TODO: This section is missing a lot of things.

See this link.

Gantt Chart

A Gantt Chart is a type of bar chart first developed in 1896 by Karo Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrate a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.

Example

🎗️ TODO: OK, I think I worked too hard on this example. Perhaps I should try this on another page. 🤪

gantt
	title Launch Code LC101
	dateFormat YYYY-MM-DD
	section Classes
		Class 1					:done des1, 2020-01-23,2020-01-23
	section Reading
		Chapters 1 through 3	:done des2, 2020-01-16
	section Exercises
	section Quizes
	section Studios
	section Assignments
Loading

Syntax

Read this, try to better organzie it.

References

[^ mjs-le ]: Mermaid.js LIve Editor [^ omg-uml ]: Object Management Group. March 2015. UML 2.5 PDF!

[^ ibm-fc ]: IBM. (ARCHIVED by Karl Kleine.) March 1970. Data Processing Techniques. PDF!