Visualize & Analyze Algorithms Effortlessly with Text2Chart

Text2Chart Online Editor

Text2Chart is an open-source tool that converts text-based descriptions into charts. It’s specifically designed for developers and technical writers who want to visualize algorithms, workflows, or decision trees in a simple and efficient way. The tool is available as a VS Code plugin, a browser extension for GitHub integration, and can even be embedded into webpages with just a single line of code.

The primary purpose of Text2Chart is to make flowchart creation as effortless as writing plain text. By using a text-based format, it allows developers to version-control their diagrams and integrate visualizations directly into their documentation or web applications.

Sample algorithm text

Here’s an example of how you can describe an algorithm in plain text:

FLOW: Binary Search Algorithm
LOOP searching for target in array
  read low (initial index of array)
  read high (last index of array)
  IF low <=  high
    THEN calculate mid ((low + high) / 2)
    IF array[mid] = target
      found target at mid
      STOP
    ELSE_IF array[mid] < target
      update low to mid + 1
    ELSE
      update high to mid - 1
  ELSE
    ERR Target not found
    STOP

Text2Object library is used to transform above text into JavaScript object, which are used by Text2Chart library to generate an interactive chart.

Features

The online application consists of four main components:

1. Algorithm Dropdown: Includes features to add, remove, sort, and search algorithms.
2. Text Editor: A textarea to write algorithms with live updates. Moving the cursor or selecting a line highlights the corresponding nodes in the chart.
3. Toolbar: Provides controls for chart appearance, node selection, and more.
4. Chart: Displays the generated flowchart based on the algorithm text.

Manage Algorithms

You can create new algorithms, which are stored in the browser’s memory. The application works completely offline once loaded. You can also add, remove, sort, or filter algorithms with ease.

Text Editor

The text editor allows you to write algorithms comfortably. It supports several keyboard shortcuts, such as commenting a line or moving lines up and down, to make writing algorithms more efficient. More features would be added in future.

When you move the cursor, click on a line, or select multiple lines in the editor, the relevant nodes in the chart are highlighted. This feature helps you focus on specific portions of the algorithm.

Toolbar

The toolbar offers several useful features:

• Simplify Charts: You can hide detailed steps to make the chart cleaner and more readable.
• Viewport Control: Fix the viewport to prevent it from moving when selecting steps.
• Save as Image: Export the chart as an image for documentation or sharing.

The most powerful tool in the toolbar is Paths. Text2Chart calculates all possible paths in the algorithm and provides details such as the total number of steps in each path and the ending step. You can:

• Click on a path to highlight all its nodes in the chart.
• Use the play button to animate the path, highlighting nodes one by one. This is especially useful for cyclic, long, or complex paths.

Chart

The chart is generated dynamically based on the algorithm you write. It includes several interactive features:

Expand / Collapse a branch: Clicking a node collapses or expands its child nodes.

• Expanding a node will not expand already collapsed nodes.
• Press ] and click a node to collapse all nested branches.
• Press [ and click a node to expand all nested branches.

Branch Selection: Hover over a node and press the following keys for different selections:

• a: Highlights all paths passing through the hovered step.
• q: Highlights all steps of all paths that come after the hovered step.
• b: Highlights all steps of all paths that come before the hovered step.
• l: Highlights all steps of the longest path passing through the hovered step. If there are multiple longest paths of the same length, the first one is selected.
• s: Highlights all steps of the shortest path passing through the hovered step. If there are multiple shortest paths of the same length, the first one is selected.

Conclusion

Text2Chart opens the door to numerous possibilities. Generating flowcharts is just one of them. I’m currently working on advanced features that will be released soon. Your support in keeping this project free and open-source is greatly appreciated.