sketchboard blog

Sketchboard.Me Confluence Plugin

By May 3, 2014

System Requirements

  • Sketchboard.Me Confluence Plugin editing requires modern web browser like Chrome, Safari or Firefox
  • Since version 3.1.0 plugin supports SVG rendered clickable elements directly on Confluence page. Support requires a modern web browser that supports SVG like Chrome, Safari, Firefox or IE11.
  • Confluence installation server needs to support Arial or Helvetica font for PNG image generation.

Add Sketchboard.Me Macro

You can add Sketchboard.Me Macro to a page by editing the page.

Edit Page

Select Sketchboard.Me Macro

Select Sketchboard.Me Macro from Macro menu.

Sketch name

Type name for the sketch. Note that name can only include ASCII characters. It is possible to refer already existing diagrams as well. In case you want to copy sketch from some other location, copy attachment xml file and point macro to that file.

Since version 3.1.0 it is possible to render sketch as SVG instead of PNG image. SVG rendered sketch elements are direcly clickable on Conflunce page. By default SVG is not used. You cand enable SVG rendering by clicking SVG check box.

Diagrams that have the SVG option enabled are part of a page content and elements are clickable if those contain a link.

Once you have pressed “Insert” you will see Sketchboard.Me macro on your Confluence editor. You can double click the diagram placeholder to change the name. Save page content.

By now you have only a link to edit the diagram, “Edit Diagram”. Press the link to open Sketchboard.Me editor.

Drawing Area

Image below shows main elements of Sketchboard.Me editor. Zoom can be used to make elements smaller while editing. It doesn’t affect the end result. Library shows all premade shapes that editor provides. Undo/Redo can be used to undo 5 previous steps. Freehand can be used to draw freehand sketches.

Remember to save your work by pressing “Save” button. You can ignore all changes and close editor by pressing “Cancel” button. Note that if you press cancel all changes will be lost.

Learn Basics

Double click the board to add show board context menu. You can add in place elements that the context menu shows. Double click element to edit text.

Arrows can be made by dragging from connection handle. Editor starts to draw arrow, release mouse and select end point element.

To get more drawing space drag board background. When ever you are lost in a big board, press Z key and view the whole board at once. Move mouse and relese Z key and board is centered at that position.

Freehand Drawing

Freehand drawing can be enabled by pressing F key. Draw by moving your mouse. Press F key again to quit freehand drawing mode. You can resize freehand drawing by bending from a resize handle. To draw straight lines press shift key while in freehand mode. Close path by double clicking while pressing shift key down.

Shortcuts

Cmd/Ctrl + S Save sketch
Z Map view
Shift Lasso selection
Delete or backspace Delete selected elements
F Freehand mode
F + Shift Draw straight lines while in Freehand mode
- Zoom Out
+ Zoom In
Cmd/Ctrl + Shift + Click Open link if component contains a link