TexEtch

TexEtch is a Visual Studio Code extension designed to convert diagrams drawn in draw.io into text format. This text format can be easily integrated into your code base to provide better explanations and documentation for your code.

Just an example

Features

Diagram to Text Conversion: Convert complex diagrams from draw.io into readable text format.
Seamless Integration: Easily integrate the converted text into your codebase to enhance documentation. Option to put the produced output at the top of the code block or alongside the code block.
Support for Multiple Diagram Types: Handles a variety of diagram types and structures.

Installation

The extension can be installed from Visual Studio Code Marketplace.

Usage

Open the draw.io website or application and create a file containing your desired diagram.
Navigate to File -> Export as -> XML and download the file.
In Visual Studio Code, open the command palette by pressing Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
Type TexEtch and select the corresponding command.
An Open Dialog box will appear, prompting you to select the required .xml file.
After selecting the file, a text input box will appear to take in the comment characters used for the language in use or any string of your choice. Leave empty for no extra characters.
- To put the generated text at top of a code snippet -> put the cursor on the line just above the block. Before After
- To put the generated text alongside the code -> select the code block.
Before After

Supported Figures

Lines: Line, Dashed Line, Dotted Line, Directional and Bidirectional Connector and Arrow. With slanted lines added, you can possibly draw anything!
Circle and Ellipse

Text
- Use text size as 11 in the draw.io editor to match the exact ratio of figures and text in the final output.
- Avoid copying text from sources with colorful text to prevent disperancies in the output.
- Leave enough space on the boundaries of text box, so that text can appear in same format.
Rectangle
Curve
List and Container
Tables