Help and Tips

System Requirements

To browse wiki content, you just need a browser capable of rendering SVG. All major modern Web browsers support this.

The editor requires the Microsoft Silverlight 5 browser plugin. This is now only supported on Internet Explorer


There is a shape editor and a page editor. The page editor is used to edit wiki pages. The shape editor is used to edit shapes that can be drawn on these pages. You can draw lines and basic shapes directly in a page. However if you want to reuse the same shape it will be much more convenient to define a shape than drawing it directly on the editor.

Drawing Lines and irregular shapes:

The pen tool can be used to define lines and shapes. To begin drawing a line or shape click the canvas with the pen tool selected. Click on the canvas to add further points. You can complete a closed shape by clicking within the handle at the start point. You can complete an unclosed shape (line) by double clicking on the canvas.

You can edit the individual points of the line or shape by double clicking on it. Right-clicking on handles will display context menus which enable merging and splitting line segments, and changing them into straight lines or curves. When a line segment is defined as a curve you can drag the midpoint to adjust the curve. Line segments are straight by default.

The square line tool is similar to the pen tool, but line segments you draw with it will be only vertical and horizontal when you first draw them.

Shape Editor:

The shape editor is accessible via the diagram.wiki dropdown menu. Shapes can be arranged into different collections, but only a default collection is enabled in this installation.

You can open different shapes in the current collection by clicking them in the right panel. You can change the current collection by selecting the menu option from the Shape Editor drop down menu.

The collection 'General.Shape Sandbox' is provided for experimentation with the Shape Editor. Feel free to edit the shapes in this in any way you like.

Shapes are organised into collections. Shape collections are identified by a combination of namespace and name. Namespaces just allow you to differentiate between collections with the same name (and therefore allow you to use the same name for different collections).

The number of shapes in a collection is currently capped at 50. If a collection contains 50 shapes then it will not be possible to add more shapes to it.

In the shape editor you can define how shapes will be coloured, rather than what colour is used. You select the colour to use when you use the shape in a page. Fill rules are selected for different parts of a shape, determining whether to apply the fill colour, line colour or leave it transparent or empty.

Page Editor

To add a hyperlink to another page within the wiki, simply mark text with square brackets. This will create a link to the page with the name within the square brackets.

For example, typing '[Main page]' will appear as a hyperlink to the page called 'Main page' in the wiki when the page is viewed outside of the editor.

General Drawing Tips

For the best ease of use while editing, put the browser window into full screen mode (via f11).

The size you draw shapes in the shape editor has no effect on them when they are used in the page editor. (Because this is a vector graphics system, scaling is perfect and results in no loss of quality.) In general it will be easier to draw shapes quite large in the shape editor.

The editor is intended for sketching diagrams. If there is a requirement for high precision in diagrams then a desktop SVG editor is more suitable.