Skip to main content

Getting started

Create a diagram​

From Templates​

When you open the application, you will find a variety of diagram templates to choose from. Each template is fully functional, containing example text to help you get started quickly.

The templates are grouped into the following categories:

  • Software Engineering
  • Project Management
  • Data Analysis
  • Business and Strategy
  • Process and Workflows
  • User Experience and Design
  • Network Diagrams

Select the template that matches your needs, and you will be presented with a ready-to-edit diagram.

From scratch​

Each diagram engine (Bytefield, Mermaid JS, PlantUML, Graphiz, Vega, Vega Lite) has its own associated syntax. If you are familiar with one of these syntaxes, you can choose to start from scratch and directly input the diagram source text in the associated window.

Editing Diagrams​

Once you have selected a diagram template or started from scratch, you will enter the edit mode. In this mode, you can modify the diagram to suit your requirements. Just type the content of your diagram and the result will be updated instantly.

Undo / Redo​

In case of error, you can revert your change by accessing the revert button

Import Diagram​

You can also import diagram syntax from an external URL.

If you want to import a Diagram for an external URL, by example following URL:

https://raw.githubusercontent.com/we-are-devdevils/text-to-diagram-examples/main/mermaidjs.txt)

simply insert the URL in the text entry, Text to Diagram will fetch content as following:

Layout Button​

Choose between vertical or horizontal windows layout, depending on your editor preference.

Save a diagram​

When you create a new diagram or make changes to an existing one, the application will prompt you to save it with a name. If you prefer not to specify a name, the title of the template will be used as the default name.

Delete a diagram​

To delete a diagram, overlay the diagram name in the left menu, and a red bin button will appear. Click on the bin and confirm the deletion to remove the diagram.

Or you can delete using the saving menu:

Switch between diagrams​

To switch between different saved diagrams, use the left column in edit mode.

View mode​

Switch to the view mode to see your diagrams without the editing interface. If there is already a saved diagram when you open the board view, the application will default to view mode.

Both in edit mode and view mode, you have several options for navigating and enhancing your diagrams:

  • Zoom: Use the zoom buttons (+/-) to adjust the diagram’s zoom level.
  • Recenter: Click the recenter button to automatically fill the window with the diagram.
  • Pan: The pan button allows you to move the diagram around.
  • Color Picker: Change the background color of the diagram using the color picker.
  • Download: Use the download button to export the diagram as an image in SVG or PNG format.