Get started with Line9

Open an example flowchart, change how it looks, make a small edit and share it.

Overview

Line9 draws diagrams from Mermaid, a plain-text way to describe them. It places every box (node) and line (edge) for you, so you never arrange anything by hand.

This page uses an example of how an organisation approves an expense claim. You’ll use these parts of the diagram page:

The Line9 diagram page with the expense approval example open. Five parts are numbered: the menu, Share, the diagram, the style panel and the mode button.

  1. Menu, under the Line9 logo: every command, including export.
  2. Share, the share icon: copy a link to the diagram.
  3. The diagram
  4. Style panel: the theme, orientation and other settings.
  5. Mode button: switch between the diagram (VIEW) and its text (SOURCE).

Step 1: Open the example flowchart

  1. Open the expense approval example. It opens in a new tab.
  2. Point at the Over £500? node. Line9 highlights it and the edges that leave it.

The example with the Over £500? node highlighted, along with its two edges, No and Yes.

Step 2: Change how it looks

Use the style panel in the bottom-right corner. Line9 redraws the diagram after each change.

The style panel: Theme, Orientation, Spacing, Node size, Legend and Comments.

  1. Click Theme and choose Linen.
  2. Click Orientation. The diagram now runs from top to bottom.
  3. Click Comments to hide the yellow comment. You may want to hide comments before you share a diagram.

The legend, in a corner of the diagram, labels each of the colours.

The example in the Linen theme, running from top to bottom, with the comment hidden.

Step 3: Make a small edit

Every Line9 diagram is written as Mermaid text. Change the text, and the diagram changes with it.

  1. Click the mode button, VIEW, at the bottom and choose SOURCE. The text opens on the left.
  2. Find Over £500? and change 500 to 1,000. Line9 redraws the diagram as you type.

The text open beside the diagram. The line now reads Over £1,000?, and so does the node.

Pro users can use the Line9 editor for easier, faster editing. Users without a Pro account can try out the editor but can’t keep any changes made. See the editor tutorial.

To share a link, click the share icon in the top-right corner, then Copy link. The link holds the whole diagram, with your changes. Anyone can open and view the shared diagram – no account needed.

The Share menu: Copy link, and Publish, which needs Line9 Pro.

To download an image, open the menu in the top-left corner and choose Export as, then PNG. Without Line9 Pro, images include a Line9 watermark.

The menu open at Export as, which offers PNG, SVG and Source.

Line9 Pro

The diagram page is free to use, with no account. Line9 Pro adds:

  • the Line9 editor
  • publishing: a page for each diagram, for your team or for anyone
  • Pro themes, such as Kingfisher
  • images without the Line9 watermark
  • your team’s published diagrams in chat apps and in the Line9 CLI
  • commercial use of the Line9 CLI

To get Line9 Pro, see Pricing. If you already have it, click Sign in at the bottom of the diagram page.

Next steps