A simple HTML5 figure editor and viewer
Create a simple figure format that can replace Microsoft Word figures in web documents.
It aims to have following features:
- Easily editable in-place by GUI.
- Easily embeddable into Wiki pages, blogs and design documents.
- Can be easily copy & pasted to another document.
- Unlike SVG, no complex graphics features are supported
- Has a text format that is easily examined and edited by human.
- Can also be saved as a separate text file.
- Can be easily compared with text-wise diff.
- Has extensible format.
The SketchCanvas figure is a file format and a JS library to render/edit. However, this project also implements a DokuWiki plugin that you can embed this document into a wiki text, and it is the most common way to use it.
See the plugin page for more.
Current implementation uses YAML as format. It enables easy inspection and editing by humans.
It can be edited by a static HTML document with JavaScript. It's so easy to setup a server that accepts and shows uploaded figures.
It's very easy to create a figure or a diagram like this one:
The source looks like this:
- type: line
points: '485,569:233,536'
- type: line
points: '605,546:478,421'
- type: line
points: '382,147:264,303'
color: blue
- type: line
points: '630,139:639,272'
color: green
- type: line
points: '763,153:492,244'
color: green
width: 2
- type: line
points: '720,142:435,209'
color: green
width: 3
- type: arrow
points: '134,115:372,269'
color: green
width: 3
- type: text
points: '583,343'
text: Normal Text
- type: text
points: '583,369'
width: 2
text: Bold Text
- type: text
points: '588,392'
width: 3
text: Extra Bold Text
- type: text
points: '589,424'
color: red
width: 3
text: Red Extra Bold Text
- type: arcarrow
points: '577,364:264,390:583,387'
color: green
width: 2
- type: ellipse
points: '567,399:784,435'
color: blue
width: 2
SketchCanvas documents can be rendered in the server if the server has a PHP running with GD extension. You have to download a file named "NotoSansCJKjp-Regular.otf" from the URL below and place it under "phplib" directory in the server in order to enable this feature.
https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKJP-hinted.zip
This feature can be used to embed sketches into a PDF in conjunction with DokuWiki's dw2pdf plugin.
As a PHP application, it does not need build the server side, but the frontend needs to bundle.
Prerequisite:
Run the following command to build the bundled script.
deno run --allow-read --allow-write --allow-net=deno.land,registry.npmjs.org --allow-env --allow-run --unstable bundle.ts
This will produce a directory and a source file bundle/SketchCanvas.js and its source map file bundle/SketchCanvas.js.map.
Make the zip file to install as a package (please run it on a Unix like shell):
./makezip.sh
sketchcanvas.zip will be produced in the directory.
This file can be installed from manual install or be linked from plugin page.