comfyui_LLM_party

1625
Updated 15 days ago
View on GitHub →See Common Issues →

Available Nodes

Repository Overview

graph_md_to_html

Documentation for the graph_md_to_html Node

Overview

The graph_md_to_html node is a part of the ComfyUI LLM Party, designed to convert graph definitions written in Markdown into an HTML format. This transformation leverages the Mermaid.js library to visually represent the graph structures within an HTML document. The node provides a flexible way to display intricate graph designs, making it an essential component in workflows that require visualization of data or processes.

Functionality

The primary function of this node is to take a graph definition, typically written in a Markdown format tailored for Mermaid.js, and convert it into HTML. This enables users to embed complex graph visualizations into their web applications or other environments that support HTML content.

Inputs

The node accepts the following inputs:

  1. Graph Definition (graph_definition): A string containing the graph written in Mermaid.js-compatible markdown. This should describe the nodes and edges of the desired graph layout.

  2. Mode (mode): A dropdown input allowing the selection of one of three themes for the visualization:

    • dark: Produces a graph with a dark background and light node text.
    • light: Uses a light background with dark node text, which is suitable for lighter-themed interfaces.
    • dtransparent: Implements a transparent background, making it versatile for overlay on various types of backgrounds.

  3. Enable (is_enable): A boolean input to enable or disable the node's functionality. If set to False, the node will not perform any conversion and will return None.

Outputs

  • HTML (HTML): The node outputs a single string containing the generated HTML. This HTML includes the graph visualization ready to be rendered in a web page.

Usage in ComfyUI Workflows

The graph_md_to_html node can be incorporated into ComfyUI workflows where visualization of process flows or data structures is necessary. It can be especially useful for:

  • Process Visualization: Illustrating workflow processes, allowing users to better understand the sequence and interaction of different components.
  • Data Representation: Converting complex data structures into an easily interpretable visual format.
  • Dynamic Documentation: Generating live documentation or reports that include visual representations of algorithms or decision trees.

Example Workflow

  1. Input Preparation: Start by preparing a graph definition in Mermaid.js syntax. Define nodes, links, and any required labels.

  2. Node Configuration: Place the graph_md_to_html node in your ComfyUI workflow. Input the graph definition and select the appropriate visualization mode. Ensure the node is enabled to perform the conversion.

  3. HTML Integration: Use the resulting HTML output in any component or process that supports HTML rendering. This could be a web-based UI in ComfyUI or other web applications.

Special Features and Considerations

  • Theme Selection: The node provides multiple themes to cater to different user interface requirements or personal preferences. This is beneficial when integrating the output into existing design systems.

  • Dynamic Sizing: The layout algorithm ensures that nodes adapt their size based on text content, maintaining readability and aesthetic consistency.

  • Ease of Integration: Since the output is standardized HTML, it integrates seamlessly with web technologies, allowing for easy embedding or further customization.

In summary, the graph_md_to_html node is a powerful tool in ComfyUI workflows for transforming graph markdown definitions into visually appealing HTML outputs, with flexibility in theme and easy integration into web contexts.