Skip to main content
Skip table of contents

Using the visual editor (Excalidraw)

Learn how to drag and drop your diagrams into place, with a library of shapes at your fingertips.

Discover how easy it can be to bring your ideas to life with our diagramming tool. Whether you're mapping out a process, visualizing a concept, or creating a flowchart, our intuitive drag-and-drop feature makes it effortless.

With a library full of shapes ready to use, you'll have everything you need at your fingertips to create clean, professional-looking diagrams that communicate your ideas effectively.

Check out this use case for the visual editor:

https://www.gocapable.com/blog/brewing-up-success-how-graph-and-grind-cafe-uses-capables-diagram-feature-1

1. Basic Drawing Tools

You’ll see a variety of drawing tools on the left toolbar, including:

  • Shapes: Select and draw rectangles, circles, and other shapes.

  • Lines: Add straight or curved lines to your diagram.

  • Freehand Drawing: Sketch freehand with the pen tool.

  • Text: Insert text anywhere on your diagram.

Simply click on any tool to activate it, and then click and drag on the canvas to create the desired element. You can also adjust the color, size, and other properties of these elements using the right sidebar.

Screenshot 2024-10-24 at 15.12.18.png

2. Adding Icons and Diagrams from the Library

Capable Diagrams for Confluence supports importing icons and libraries to enhance your diagrams. You can access these pre-built libraries, such as AWS, Azure, or popular design elements, directly within the Excalidraw editor.

  1. Access the Library: Click on the "Library" icon in the top toolbar.

  2. Choose Elements: Select from a wide range of built-in diagram libraries, including technical icons, wireframes, architecture symbols, and more.

  3. Insert to Canvas: Once you’ve selected your desired elements, click “Add to Canvas.” You can then move, resize, and edit them just like any other element in the editor.

Screenshot 2024-10-24 at 15.13.04.png

3. Using Custom Libraries

You can also upload your own custom libraries to the Excalidraw editor. This is useful for team-specific icon sets or reusable diagram components:

  1. Open the Add Library menu.

  2. Choose a library to add to your shape library

Screenshot 2024-10-24 at 15.13.51.png

4. Organizing and Editing Diagrams

Excalidraw allows you to easily move, resize, and align diagram elements.

  • Select and Move: Click on any shape or element to select it. Drag to reposition.

  • Resize: Click and drag the corners of any selected element to resize.

  • Arrange Layers: Use the "Bring Forward" and "Send Backward" options from the right-click menu to organize overlapping elements.

Screenshot 2024-10-24 at 15.15.05.png

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.