Insert from text to create tree and entity diagrams

draw.io 27 Dec 2019

Share:

Several features in our diagram editor let you create diagrams automatically from simple text statements.

Click on Arrange > Insert > Advanced to find the text entry features. Alternatively, click the + icon in the toolbar, then select Advanced.

The text insert features include:

  • From Text: Create a simple hierarchical (tree) diagram or add entities containing simple lists.
  • PlantUML: Create a variety of UML and flow diagrams, and use the Graphviz DOT code to create tree diagrams, data flows, graphs and more.
  • Mermaid: Generate a diagram from text using the Mermaid syntax to build flow charts and UML diagrams.
  • SQL: Add database entities to your diagram by inserting SQL code.
  • CSV: Create flow charts, tree diagrams and more from comma delimited (CSV) data and some custom styling code.

The dialog that appears when you select one of these features contains sample text to give you an idea of how to use each feature.

How to create a diagram from text

The text used to define the diagram is quite simple - a shape label, followed by an arrow -> to represent a connector, followed by another shape label. Each connected pair is on its own line. Be careful to remove any extra spaces before and after the arrows.

Advertising
Advertising->Communication
Communication->PR
Communication->Sponsoring
Communication->Media
Communication->Events
Advertising->Marketing
Marketing->Segmentation
Marketing->Instruments
Marketing->Aims
Advertising->Embassy
Embassy->Layout
Embassy->Appeal
Embassy->Theories
Advertising->Organization
Organization->Content
Organization->Budget
Organization->Analysis

You can add a label to a connector.

Organization->performs->Analysis
Organization->sets->Budget
  1. Go to our online editor at app.diagrams.net. Click Arrange > Insert > Advanced > From Text.
  2. From the drop down selector next to the Close button, select Diagram.
    Insert text to create a tree diagram
  3. Select all of the sample text in the dialog and paste in your own text. Then click Insert.
    A diagram automatically created from text at in draw.io

Tip: You can automatically rearrange a diagram if it’s too spread out, like this one is. Select everything, then click Arrange > Layout and select one of the options. For example, rearranging this diagram as a radial tree made it much more attractive.

Auto-rearrange your diagrams via the Arrange > Layout menu

How to create entities for an entity diagram from text

If you select List as the diagram type when inserting from text, you can create entity shapes that contain either one or two lists, and a heading. This is useful for UML diagrams, database diagrams when you don’t have the SQL, and more.

  1. Click Arrange > Insert > Advanced > From Text.
  2. Make sure the selector is set to List (it is by default). Add entity shapes containing lists by inserting text
  3. Select all of the sample text in the dialog and paste in your own text. Then click Insert.
    An entity diagram created from text

As you can see in the dialog, the child nodes are included as list elements at the top of each entity, and some of the tasks they perform are included in the second list. These two lists are separated by two dashes. Each list element has either a dash or a plus. Here is the partial text used to create the diagram below.

Advertising
- Communication
- Marketing
- Embassy
- Organization

Marketing
- Segmentation
- Instruments
- Aims
--
+ testing

Communication
- PR
- Sponsoring
- Media
- Events
--
+ customer outreach
+ advertising
+ event coordination

You can then connect and rearrange these entities to show more clearly how they are related.

A connected entity diagram example created in draw.io

See all of the elements you can insert into your diagram

Follow us on GitHub, Twitter, Facebook.

Share: