/diagraam

An interactive diagram editor mainly for Software Architecture and Algorithmic Decision Tree diagrams.

Primary LanguageJavaScript

Diagraam

demo diagram 1

Diagraam is simply a diagram editor, mainly focused for software architecture and algorithmic decision tree diagrams. The goal is to provide a platform to create interactive diagrams.

Features

  1. It provides a component-list (list of all shapes supported by Diagraam) where you can pick and drag a component from.
  2. You can use a component by dragging and dropping an element on the editor. Place the component wherever you want by dragging it.
  3. In the editor, click on an element to see different options, set width, height, background color, label and many more.
  4. To create a link (an arrow) between two elements, click on an element (that you want to make the source of the arrow/link). Then click on the blue circle to create a link. An link will appear. Drag the arrow-head of the link over the target element and drop. Now, finally, the source and the target elements are connected by the link/arrow.
  5. To delete a link or an element, click on it and then click on the cross button.
  6. You can create any custom shapes using the polygon component. First, drag the polygon to the editor and drop. Then click on it. In the body section, change the refD option to create your custom shape (unfortunately you need to know svg commands).

Demos

demo diagram 1 demo diagram 2