​
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
<script>
	import { Svelvet } from 'svelvet';

	const mermaidStr = `A[Flowchart Time!] --> B[Choice of Tool]
    B --> |Ye Olde Static Flowchart| C[Back to the Stone Age]
    B --> |Svelvet's Flowchart Component| D[Smooth interactivity]
    D --> E[Effortless styling]
    D --> F[Unparalleled customization]`;
</script>

<body>
	<Svelvet theme="dark" width={800} height={800} controls mermaid={mermaidStr} />
</body>

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
const mermaidStr = `A[Flowchart Time!] --> B[Choice of Tool]
  B --> |Ye Olde Static Flowchart| C[Back to the Stone Age]
  B --> |Svelvet's Flowchart Component| D[Smooth interactivity]
  D --> E[Effortless styling]
  D --> F[Unparalleled customization]`;

​
Key Steps for Creating Your Flowchart:

  1. 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.

  2. 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.

  3. 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.

  4. 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.