Add ability to visualize the workflow using mermaid #290
Assignees
Labels
Comments
maximilien
added
documentation
|
You can then include the markdown in your HTML pages with something like: <!DOCTYPE html>
<html>
<head>
<title>Mermaid Diagram Example</title>
</head>
<body>
<h1>Flowchart</h1>
<div class="mermaid">
graph LR
A[Start] --> B{Decision}
B -- Yes --> C[Process 1]
B -- No --> D[Process 2]
C --> E[End]
D --> E
</div>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</body>
</html> |
|
@psschwei this could be a good one to help on if @akihikokuroda has not started. Should be easy to get basics and we can improve later. Let us know. |
|
OK folks, I will take this one @akihikokuroda and @psschwei Pushing initial PR soon. |
This was referenced Mar 11, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add a method to
Workflow::to_mermaid() -> strMermaid is flexible so not only graphs can be represented but also sequence diagram:
sequenceDiagram participant agent1 participant agent2 participant agent3 agent1->>agent2: step1 agent2->>agent3: step2 agent2-->>agent1: step3 agent1->>agent3: step4And flowcharts with:
flowchart TD; agent1 -- condition1 -->agent2; agent2-->agent3;And graphs with:
graph TD; agent1-->agent2; agent2-->agent3;Find details about Mermaid here and JavaScript libraries.
The text was updated successfully, but these errors were encountered: