It's better when it's simple

User Tools

Site Tools


SketchCanvas Plugin

Compatible with DokuWiki

  • 2024-02-06 "Kaos" unknown
  • 2023-04-04 "Jack Jackrum" yes
  • 2022-07-31 "Igor" yes
  • 2020-07-29 "Hogfather" yes

plugin Write SketchCanvas documents embedded in DokuWiki.

Last updated on
Syntax, Action
By Masahiro Sakuta

This plugin enables you to embed sketches in Wiki text. You can edit each sketch in an in-place GUI editor on the browser.

The sketches are formatted in a very simple format.


Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.


  • The client's browser must support HTML5 canvas.

If any of your Wiki viewers may have legacy browsers that don't support HTML5, the sketches won't show up for them. 1)


The best way to see how it works is by seeing this live demo site Demo site is dead!

The sketches are included by <skcanvas> tag.

When a <skcanvas> tag is included, a sketch is rendered in place of the tag like an image link and an edit button appears below it.

A new button is added to the toolbar in edit page for inserting new sketch. (if you have used EditTable plugin, it works much like the same way)

A simple sketch only consists of a meta element with sketch size information:

- type: meta
  size: [200, 100]

A bit more complex source:

- type: meta
  size: [200, 100]
- type: rect
  points: '35,25:137,64'
- type: text
  points: '45,45'
  text: Example
- type: arrow
  points: '14,46:30,46'
- type: arrow
  points: '142,46:174,46'

Results in a figure like this:


Path tool is a versatile tool for sketching complex lines.

  • Path can be collection of line segments or curved splines.
  • Path can have arrowheads on one or both ends.

Below is actually rendered sketches converted to an image. (Source omitted)

Edit page

You don't have to remember the syntax to use the sketches. There's an edit button below each sketch.

Pressing the edit button brings you to the editor page.

New Sketch

When you want to add a new sketch into a document, press new sketch button in the toolbar in edit mode. You can also edit existing sketch in the edit page by selecting a whole < skcanvas > tag in the wikitext and pressing the button.

Output to PDF

This plugin works with dw2pdf plugin to produce PDF with embedded SketchCanvas documents. To enable this feature with text elements in the canvas, you need to download and place a font file named NotoSansCJKjp-Regular.otf from to phplib/ subdirectory.


The SketchCanvas syntax is a YAML document. All text between <skcanvas> and </skcanvas> must be valid YAML document.

Although you don't have to remember them, complete syntax definition can be found at syntax.

Configuration and Settings

There is no configuration option yet.

Change Log


If a Wiki system could be a knowledge base that everyone can participate, it must be easy to edit all contents for everyone. If it's not easy enough, people would end up using MS Word to write documents.

We already have edittable which makes table editing easy enough, but it's still awkward to include sketches in a Wiki document.

If you had a decent vector graphics editor such as Adobe Illustrator, Inkscape or even Excel, you can only attach rasterized image files and other people couldn't edit them unless the source is separately provided. So I decided to make a format for sketches that meets the requirements:

  • It must be editable with the browser alone (if HTML5 compliant).
  • The source is provided as well as the sketch image.
  • The format is human readable and easy to compare with text diffs.

There is the svgedit plugin that can do similar things with SVG. So why should I bother reinventing wheels?

SketchCanvas is very different from SVG in several aspects:

  • It can be embedded in the Wiki text rather than external image file.
  • It has very simple and easy-to-read syntax for humans.
  • The syntax is easy to compare and produce meaningful diffs.
  • Its functionality is intentionally very limited so that the source text cannot be too complex.

The main purpose is to sketch quick ideas/concepts and not doing artistic paintings.


Blue areas are planned but not implemented yet. BTW, this image itself was created with SketchCanvas.

Known Bugs and Issues

  • Toolbars showing in edit page that aren't helpful

ToDo/Wish List

  • Increase number of types of primitives
Probably we could make server-side renderer to show rasterized images for them, but it would require extensive development. Even if we have done it, old browsers still wouldn't be able to edit.
plugin/sketchcanvas.txt · Last modified: 2024-01-07 16:37 by msakuta

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki