Two-way pair — An arrowhead and the edge that leaves beside it should not touch.Open in PlaygroundTwo-way pairs in a triangleOpen in PlaygroundDiamond with an edge back to it — Three edges on the tip of the diamond, and one in and one out on top of F.Open in PlaygroundDecision with loopsOpen in Playground
Edges across and onto groups — An edge that ends on a group should not land where another edge passes through its border.Open in PlaygroundTwo-way between groupsOpen in Playground
9. flowchart LR · id1(This is the text in the box)Open in Playground10. flowchart LR · id1([This is the text in the box])Open in Playground11. flowchart LR · id1[[This is the text in the box]]Open in Playground12. flowchart LR · id1[(Database)]Open in Playground13. flowchart LR · id1((This is the text in the circle))Open in Playground14. flowchart LR · id1>This is the text in the box]Open in Playground15. flowchart LR · id1{This is the text in the box}Open in Playground16. flowchart LR · id1{{This is the text in the box}}Open in Playground17. flowchart TD · id1[/This is the text in the box/]Open in Playground18. flowchart TD · id1[\This is the text in the box\]Open in Playground19. flowchart TD · A[/Christmas\]Open in Playground20. flowchart TD · B[\Go shopping/]Open in Playground21. flowchart TD · id1(((This is the text in the circle)))Open in Playground22. flowchart RL · A@{ shape: manual-file, label: "File Handling"}Open in Playground23. flowchart TD · A@{ shape: rect, label: "This is a process" }Open in Playground24. flowchart TD · A@{ shape: rounded, label: "This is an event" }Open in Playground25. flowchart TD · A@{ shape: stadium, label: "Terminal point" }Open in Playground26. flowchart TD · A@{ shape: subproc, label: "This is a subprocess" }Open in Playground27. flowchart TD · A@{ shape: cyl, label: "Database" }Open in Playground28. flowchart TD · A@{ shape: circle, label: "Start" }Open in Playground29. flowchart TD · A@{ shape: odd, label: "Odd shape" }Open in Playground30. flowchart TD · A@{ shape: diamond, label: "Decision" }Open in Playground31. flowchart TD · A@{ shape: hex, label: "Prepare conditional" }Open in Playground32. flowchart TD · A@{ shape: lean-r, label: "Input/Output" }Open in Playground33. flowchart TD · A@{ shape: lean-l, label: "Output/Input" }Open in Playground34. flowchart TD · A@{ shape: datastore, label: "Datastore" }Open in Playground35. flowchart TD · A@{ shape: trap-b, label: "Priority action" }Open in Playground36. flowchart TD · A@{ shape: trap-t, label: "Manual operation" }Open in Playground37. flowchart TD · A@{ shape: dbl-circ, label: "Stop" }Open in Playground38. flowchart TD · A@{ shape: text, label: "This is a text block" }Open in Playground39. flowchart TD · A@{ shape: notch-rect, label: "Card" }Open in Playground40. flowchart TD · A@{ shape: lin-rect, label: "Lined process" }Open in Playground41. flowchart TD · A@{ shape: sm-circ, label: "Small start" }Open in Playground42. flowchart TD · A@{ shape: framed-circle, label: "Stop" }Open in Playground43. flowchart TD · A@{ shape: fork, label: "Fork or Join" }Open in Playground44. flowchart TD · A@{ shape: hourglass, label: "Collate" }Open in Playground45. flowchart TD · A@{ shape: comment, label: "Comment" }Open in Playground46. flowchart TD · A@{ shape: brace-r, label: "Comment" }Open in Playground47. flowchart TD · A@{ shape: braces, label: "Comment" }Open in Playground48. flowchart TD · A@{ shape: bolt, label: "Communication link" }Open in Playground49. flowchart TD · A@{ shape: doc, label: "Document" }Open in Playground50. flowchart TD · A@{ shape: delay, label: "Delay" }Open in Playground51. flowchart TD · A@{ shape: das, label: "Direct access storage" }Open in Playground52. flowchart TD · A@{ shape: lin-cyl, label: "Disk storage" }Open in Playground53. flowchart TD · A@{ shape: curv-trap, label: "Display" }Open in Playground54. flowchart TD · A@{ shape: div-rect, label: "Divided process" }Open in Playground55. flowchart TD · A@{ shape: tri, label: "Extract" }Open in Playground56. flowchart TD · A@{ shape: win-pane, label: "Internal storage" }Open in Playground57. flowchart TD · A@{ shape: f-circ, label: "Junction" }Open in Playground58. flowchart TD · A@{ shape: lin-doc, label: "Lined document" }Open in Playground59. flowchart TD · A@{ shape: notch-pent, label: "Loop limit" }Open in Playground60. flowchart TD · A@{ shape: flip-tri, label: "Manual file" }Open in Playground61. flowchart TD · A@{ shape: sl-rect, label: "Manual input" }Open in Playground62. flowchart TD · A@{ shape: docs, label: "Multiple documents" }Open in Playground63. flowchart TD · A@{ shape: processes, label: "Multiple processes" }Open in Playground64. flowchart TD · A@{ shape: flag, label: "Paper tape" }Open in Playground65. flowchart TD · A@{ shape: bow-rect, label: "Stored data" }Open in Playground66. flowchart TD · A@{ shape: cross-circ, label: "Summary" }Open in Playground67. flowchart TD · A@{ shape: tag-doc, label: "Tagged document" }Open in Playground68. flowchart TD · A@{ shape: tag-rect, label: "Tagged process" }Open in Playground69. flowchart TD · A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t…Open in Playground70. flowchart TD · A@{ img: "https://mermaid.js.org/favicon.svg", label: "My exampl…Open in Playground71. flowchart LR · A-->BOpen in Playground72. flowchart LR · A --- BOpen in Playground73. flowchart LR · A-- This is the text! ---BOpen in Playground74. flowchart LR · A---|This is the text|BOpen in Playground75. flowchart LR · A-->|text|BOpen in Playground76. flowchart LR · A-- text -->BOpen in Playground77. flowchart LR · A-.->B;Open in Playground78. flowchart LR · A-. text .-> BOpen in Playground79. flowchart LR · A ==> BOpen in Playground80. flowchart LR · A == text ==> BOpen in Playground81. flowchart LR · A ~~~ BOpen in Playground82. flowchart LR · A -- text --> B -- text2 --> COpen in Playground
