Flow visualizer (#1377)

* Almost working!

* It fully works but not clean enought

* Working but not clean engouth

* Everything is workign

* WIP. Working on adding and & or to flows. In the middle of setting up template for flow as well

* template working

* Everything is working

* More changes and todos

* Add more support for @start

* Router working now

* minor tweak to

* minor tweak to conditions and event handling

* Update logs

* Too trigger happy with cleanup

* Added in Thiago fix

* Flow passing results again

* Working on docs.

* made more progress updates on docs

* Finished talking about controlling flows

* add flow output

* fixed flow output section

* add crews to flows section is looking good now

* more flow doc changes

* Update docs and add more examples

* drop visualizer

* save visualizer

* pyvis is beginning to work

* pyvis working

* it is working

* regular methods and triggers working. Need to work on router next.

* properly identifying router and router children nodes. Need to fix color

* children router working. Need to support loops

* curving cycles but need to add curve conditionals

* everythin is showing up properly need to fix curves

* all working. needs to be cleaned up

* adjust padding

* drop lib

* clean up prior to PR

* incorporate joao feedback

* final tweaks for joao

* Refactor to make crews easier to understand

* update CLI and templates

* Fix crewai version in flows

* Fix merge conflict

src/crewai/flow/html_template_handler.py

@@ -0,0 +1,66 @@
+import base64
+import os
+import re
+
+
+class HTMLTemplateHandler:
+    def __init__(self, template_path, logo_path):
+        self.template_path = template_path
+        self.logo_path = logo_path
+
+    def read_template(self):
+        with open(self.template_path, "r", encoding="utf-8") as f:
+            return f.read()
+
+    def encode_logo(self):
+        with open(self.logo_path, "rb") as logo_file:
+            logo_svg_data = logo_file.read()
+            return base64.b64encode(logo_svg_data).decode("utf-8")
+
+    def extract_body_content(self, html):
+        match = re.search("<body.*?>(.*?)</body>", html, re.DOTALL)
+        return match.group(1) if match else ""
+
+    def generate_legend_items_html(self, legend_items):
+        legend_items_html = ""
+        for item in legend_items:
+            if "border" in item:
+                legend_items_html += f"""
+                <div class="legend-item">
+                <div class="legend-color-box" style="background-color: {item['color']}; border: 2px dashed {item['border']};"></div>
+                <div>{item['label']}</div>
+                </div>
+                """
+            elif item.get("dashed") is not None:
+                style = "dashed" if item["dashed"] else "solid"
+                legend_items_html += f"""
+                <div class="legend-item">
+                <div class="legend-{style}" style="border-bottom: 2px {style} {item['color']};"></div>
+                <div>{item['label']}</div>
+                </div>
+                """
+            else:
+                legend_items_html += f"""
+                <div class="legend-item">
+                <div class="legend-color-box" style="background-color: {item['color']};"></div>
+                <div>{item['label']}</div>
+                </div>
+                """
+        return legend_items_html
+
+    def generate_final_html(self, network_body, legend_items_html, title="Flow Graph"):
+        html_template = self.read_template()
+        logo_svg_base64 = self.encode_logo()
+
+        final_html_content = html_template.replace("{{ title }}", title)
+        final_html_content = final_html_content.replace(
+            "{{ network_content }}", network_body
+        )
+        final_html_content = final_html_content.replace(
+            "{{ logo_svg_base64 }}", logo_svg_base64
+        )
+        final_html_content = final_html_content.replace(
+            "<!-- LEGEND_ITEMS_PLACEHOLDER -->", legend_items_html
+        )
+
+        return final_html_content