Description
The Flowchart component, leveraging the simplicity of Mermaid syntax, allows for the creation of detailed, node-based flowcharts from plain text descriptions. By assigning a Mermaid string to the ‘mermaid’ property of the Svelvet component, users can effortlessly convert their text-based flowcharts into dynamic, interactive diagrams. The Flowchart component ensures a smooth, user-friendly interface, making it ideal for both novice and experienced designers seeking to visualize complex processes or data flows.App.svelte
Checkout the sandbox here.
Creating a Flowchart with the Svelvet Component
The Mermaid property in the Svelvet component is designed for creating intricate flowcharts with ease. It accepts a string formatted in Mermaid syntax, a user-friendly way to define flowcharts through text. In this section, we’ll explore an example that illustrates how Svelvet processes a Mermaid string, showcasing the functionalities you can leverage and the current limitations to be aware of. Here’s a sample string to start with:Mermaid.svelte
Key Steps for Creating Your Flowchart:
- No Need for ‘graph’ Keyword: Unlike regular Mermaid syntax, you don’t need to start your string with “graph”. In Svelvet, we automatically understand that you’re making a flowchart.
- Creating Nodes: Start by giving your node an ID, like ‘A’, and then add a label in brackets. For example, A[Your Label Here]. While Mermaid usually uses different bracket styles for various shapes, Svelvet keeps it simple for now, so no shape variations just yet.
- Drawing Connections (Edges): To connect two nodes, use dashes and an arrow. For example, A —> B. This creates a line (or Edge, as we call it in Svelvet) from node A to node B. Once you’ve set up a node, you can easily refer to it elsewhere in your flowchart using its ID.
- Labeling Edges: Want to add a label to your connection? Just wrap your text in vertical bars and place it between two nodes. Like this: A —> |This is a label| B.