Famously an picture is worth a thousand words. That may or may not be true but a diagram can definitely help explain something. There’s plenty of software and online tools to help with this but, in my experience, making a diagram can still take a lot of time. It’s good to do but if you could do it faster your more likely to make one.<\/p>\n\n\n\n
Mermaid<\/a> is a diagramming tool that also supports scripts. It can be integrated into markdown and is available on github<\/a> so you can see the diagrams in your documentation directly. Handily for me there is also a WordPress block, MerPress<\/a>. I also like the idea of generating these automatically in, say, as part of documentation.<\/p>\n\n\n\n Different chart types can have different syntax depending on the needs of the chart.\nThat’s useful but it looks like it leads to some inconsistencies.\nHere are a bunch of examples but there’s even more on the Mermaid site.<\/p>\n\n\n\n Lets start with something basic: nodes, edges, arrows and labels:<\/p>\n\n\n\n becomes:<\/p>\n\n\n\n Lets make it slightly more complicated:<\/p>\n\n\n\n These could be useful although they may be limited compared to a chart specific WordPress plugin.<\/p>\n\n\n\n I haven’t had a chance to use this in anger. It definitely has a few rough edges. There are some visual glitches and more consistency across types would be nice. However this was really quick which makes it easier to throw something in. It’s definitely got some possibilities and I’ll try to use it in the blog.<\/p>\n","protected":false},"excerpt":{"rendered":" Famously an picture is worth a thousand words. That may or may not be true but a diagram can definitely help explain something. There’s plenty of software and online tools to help with this but, in my experience, making a diagram can still take a lot of time. It’s good to do but if you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[6,28,18],"class_list":["post-234","post","type-post","status-publish","format-standard","hentry","category-general","tag-blogging","tag-documentation","tag-tools"],"_links":{"self":[{"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/posts\/234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/comments?post=234"}],"version-history":[{"count":4,"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":239,"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/posts\/234\/revisions\/239"}],"wp:attachment":[{"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/media?parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/categories?post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/permutationcity.co.uk\/bp\/wp-json\/wp\/v2\/tags?post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Boxes and lines<\/h2>\n\n\n\n
Graphs<\/h3>\n\n\n\n
```mermaid\ngraph LR;\n\nA[Facing North]--->B\nA-->C\nB(Turn right)--->F[Facing East]\nC(Turn left)-->D\nD(Turn left)-->E\nE(Turn left)-->F\n```<\/pre><\/div>\n\n\n\n
graph LR;\n\nA[Facing North]--->B\nA-->C\nB(Turn right)--->F[Facing East]\nC(Turn left)-->D\nD(Turn left)-->E\nE(Turn left)-->F<\/pre><\/div>\n\n\n\n
Flowchart<\/h3>\n\n\n\n
```mermaid\nflowchart LR\n\nA[Facing North]-->B\nB{Waste time}-->|No| C\nB-->|Yes| D\nC(Turn right)--->G[Facing East]\nD(Turn left)-->E\nE(Turn left)-->F\nF(Turn left)-->G\n```<\/pre><\/div>\n\n\n\nflowchart LR\n\nA[Facing North]-->B\nB{Waste time}-->|No| C\nB-->|Yes| D\nC(Turn right)--->G[Facing East]\nD(Turn left)-->E\nE(Turn left)-->F\nF(Turn left)-->G<\/pre><\/div>\n\n\n\nState diagram<\/h3>\n\n\n\n
```mermaid\nstateDiagram-v2\n\ndirection LR\n[*] --> North\nNorth --> East : Right\nNorth --> West : Left\nWest --> South : Left\nSouth --> East : Left\nEast --> [*]\n```<\/pre><\/div>\n\n\n\n
stateDiagram-v2\n\ndirection LR\n[*] --> North\nNorth --> East : Right\nNorth --> West : Left\nWest --> South : Left\nSouth --> East : Left\nEast --> [*]<\/pre><\/div>\n\n\n\n
Mathematical<\/h2>\n\n\n\n
Pie charts<\/h3>\n\n\n\n
```mermaid\npie\n\ntitle Household pet ownership in UK\n"Dogs" : 31\n"Cats" : 26\n"Rabbits" : 2.8\n"Birds" : 2.3\n"Hamsters" : 2.1\n"Guinea pigs" : 1.8\n```<\/pre><\/div>\n\n\n\n
pie\n\ntitle Household pet ownership in UK\n\"Dogs\" : 31\n\"Cats\" : 26\n\"Rabbits\" : 2.8\n\"Birds\" : 2.3\n\"Hamsters\" : 2.1\n\"Guinea pigs\" : 1.8<\/pre><\/div>\n\n\n\n
Bar chart<\/h3>\n\n\n\n
```mermaid\nxychart-beta\n\ntitle "Historic pet ownership in UK"\nx-axis [2011-12, 2012-13, 2013-14, 2014-15, 2015-16, 2016-17, 2017-18, 2018-19, 2019-20]\ny-axis "Percentage pet ownership" 0 --> 100\nbar [47, 48, 47, 46, 40, 44, 45, 40, 41]\nline [47, 48, 47, 46, 40, 44, 45, 40, 41]\n```<\/pre><\/div>\n\n\n\n
xychart-beta\n\ntitle \"Historic pet ownership in UK\"\nx-axis [2011-12, 2012-13, 2013-14, 2014-15, 2015-16, 2016-17, 2017-18, 2018-19, 2019-20]\ny-axis \"Percentage pet ownership\" 0 --> 100\nbar [47, 48, 47, 46, 40, 44, 45, 40, 41]\nline [47, 48, 47, 46, 40, 44, 45, 40, 41]<\/pre><\/div>\n\n\n\n
Quadrant chart<\/h3>\n\n\n\n
```mermaid\nquadrantChart\n\ntitle Which pet to get?\nx-axis Less work --> More work\ny-axis Less cute --> More cute\nquadrant-1 Maybe\nquadrant-2 Yes\nquadrant-3 Maybe\nquadrant-4 No\nToad: [0.45, 0.23]\nDog: [0.57, 0.69]\nSnake: [0.78, 0.34]\nFrog: [0.40, 0.34]\nCat: [0.35, 0.78]\n```<\/pre><\/div>\n\n\n\n
quadrantChart\n\ntitle Which pet to get?\nx-axis Less work --> More work\ny-axis Less cute --> More cute\nquadrant-1 Maybe\nquadrant-2 Yes\nquadrant-3 Maybe\nquadrant-4 No\nToad: [0.45, 0.23]\nDog: [0.57, 0.69]\nSnake: [0.78, 0.34]\nFrog: [0.40, 0.34]\nCat: [0.35, 0.78]<\/pre><\/div>\n\n\n\n
Time based diagram<\/h2>\n\n\n\n
Sequence diagram<\/h3>\n\n\n\n
```mermaid\nsequenceDiagram\n\nUser->>Browser: Enters login credentials\nBrowser->>WebServer: Sends login request\nWebServer->>Database: Verifies credentials\nalt Credentials valid\n Database-->>WebServer: Returns user data\n WebServer-->>Browser: Sends authentication token\n Browser-->>User: Displays successful login\nelse Credentials invalid\n Database-->>WebServer: Returns error\n WebServer-->>Browser: Sends authentication failure\n Browser-->>User: Displays error message\nend\n```<\/pre><\/div>\n\n\n\n
sequenceDiagram\n\nUser->>Browser: Enters login credentials\nBrowser->>WebServer: Sends login request\nWebServer->>Database: Verifies credentials\nalt Credentials valid\n Database-->>WebServer: Returns user data\n WebServer-->>Browser: Sends authentication token\n Browser-->>User: Displays successful login\nelse Credentials invalid\n Database-->>WebServer: Returns error\n WebServer-->>Browser: Sends authentication failure\n Browser-->>User: Displays error message\nend<\/pre><\/div>\n\n\n\n
Gantt chart<\/h3>\n\n\n\n
```mermaid\ngantt\n\ntitle Website Redesign Project\ndateFormat YYYY-MM-DD\nsection Planning\nRequirements Gathering :a1, 2024-06-01, 5d\nProject Plan :a2, after a1, 3d\nsection Design\nWireframe Design :b1, 2024-06-07, 4d\nPrototype Design :b2, after b1, 5d\nsection Development\nFrontend Development :c1, 2024-06-16, 7d\nBackend Development :c2, after c1, 7d\nsection Testing\nTesting and Fixes :d1, 2024-06-30, 5d\nsection Deployment\nDeployment :e1, 2024-07-06, 2d\n```<\/pre><\/div>\n\n\n\n
gantt\n\ntitle Website Redesign Project\ndateFormat YYYY-MM-DD\nsection Planning\nRequirements Gathering :a1, 2024-06-01, 5d\nProject Plan :a2, after a1, 3d\nsection Design\nWireframe Design :b1, 2024-06-07, 4d\nPrototype Design :b2, after b1, 5d\nsection Development\nFrontend Development :c1, 2024-06-16, 7d\nBackend Development :c2, after c1, 7d\nsection Testing\nTesting and Fixes :d1, 2024-06-30, 5d\nsection Deployment\nDeployment :e1, 2024-07-06, 2d<\/pre><\/div>\n\n\n\n
Timeline<\/h3>\n\n\n\n
```mermaid\ntimeline\n\n2002 : LinkedIn\n2004 : Facebook\n : Google\n2005 : Youtube\n2006 : Twitter\n```<\/pre><\/div>\n\n\n\n
timeline\n\n2002 : LinkedIn\n2004 : Facebook\n : Google\n2005 : Youtube\n2006 : Twitter<\/pre><\/div>\n\n\n\n
Git graph<\/h2>\n\n\n\n
```mermaid\ngitGraph\n\ncommit id: "Initial commit"\ncommit id: "Added basic structure"\nbranch develop\ncheckout develop\ncommit id: "Implemented feature"\ncommit id: "Fixed bug in feature"\ncheckout main\nmerge develop\ncommit id: "Refactored codebase"\ncommit id: "Released v2.0.0"\n```<\/pre><\/div>\n\n\n\n
gitGraph\n\ncommit id: \"Initial commit\"\ncommit id: \"Added basic structure\"\nbranch develop\ncheckout develop\ncommit id: \"Implemented feature\"\ncommit id: \"Fixed bug in feature\"\ncheckout main\nmerge develop\ncommit id: \"Refactored codebase\"\ncommit id: \"Released v2.0.0\"<\/pre><\/div>\n\n\n\n
Relationship diagram<\/h2>\n\n\n\n
Class diagram<\/h3>\n\n\n\n
```mermaid\nclassDiagram\n\ndirection LR\nclass Car {\n - make: string\n - model: string\n - year: int\n + accelerate(): void\n + brake(): void\n}\nclass Person {\n - name: string\n - age: int\n + walk(): void\n + talk(message: string): void\n}\nclass Engine {\n - cylinders: int\n - horsepower: int\n + start(): void\n + stop(): void\n}\nCar "1" -- "1" Engine : has\nPerson <-- Car : drives\n```<\/pre><\/div>\n\n\n\nclassDiagram\n\ndirection LR\nclass Car {\n - make: string\n - model: string\n - year: int\n + accelerate(): void\n + brake(): void\n}\nclass Person {\n - name: string\n - age: int\n + walk(): void\n + talk(message: string): void\n}\nclass Engine {\n - cylinders: int\n - horsepower: int\n + start(): void\n + stop(): void\n}\nCar \"1\" -- \"1\" Engine : has\nPerson <-- Car : drives<\/pre><\/div>\n\n\n\nEntity-relationship diagram<\/h3>\n\n\n\n
```mermaid\nerDiagram\n\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\nCUSTOMER ||--o{ ORDER : places\nCUSTOMER ||--o{ INVOICE : "liable for"\nDELIVERY-ADDRESS ||--o{ ORDER : receives\nINVOICE ||--|{ ORDER : covers\nORDER ||--|{ ORDER-ITEM : includes\nPRODUCT-CATEGORY ||--|{ PRODUCT : contains\nPRODUCT ||--o{ ORDER-ITEM : "ordered in"\n```<\/pre><\/div>\n\n\n\nerDiagram\n\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\nCUSTOMER ||--o{ ORDER : places\nCUSTOMER ||--o{ INVOICE : \"liable for\"\nDELIVERY-ADDRESS ||--o{ ORDER : receives\nINVOICE ||--|{ ORDER : covers\nORDER ||--|{ ORDER-ITEM : includes\nPRODUCT-CATEGORY ||--|{ PRODUCT : contains\nPRODUCT ||--o{ ORDER-ITEM : \"ordered in\"<\/pre><\/div>\n\n\n\nMindmap<\/h3>\n\n\n\n
```mermaid\nmindmap\n Overview\n Project Goals\n Improve User Interface\n Enhance Performance\n Timeline\n Q1 2024\n Q2 2024\n Development\n Frontend\n UI Design\n Client-side Logic\n Backend\n Server Setup\n Database Integration\n Testing\n Unit Testing\n Integration Testing\n Deployment\n Server Deployment\n Database Migration\n```<\/pre><\/div>\n\n\n\n
mindmap\n Overview\n Project Goals\n Improve User Interface\n Enhance Performance\n Timeline\n Q1 2024\n Q2 2024\n Development\n Frontend\n UI Design\n Client-side Logic\n Backend\n Server Setup\n Database Integration\n Testing\n Unit Testing\n Integration Testing\n Deployment\n Server Deployment\n Database Migration<\/pre><\/div>\n\n\n\n
In the end<\/h2>\n\n\n\n