Markdown Hosing - Register Now!

Home > Authoring > Guide > Draw | Japanese


The SVG chart generater is a Perl script for generating a very simple configuration-type chart like the one below with limited but simple instructions.

PC File Server Disk Inline SVG not supported by your browser

The generator allows you to draw a limited number of simple shapes (such as squares or circles) with a text description and connect them horizontally and vertically.

Drawing Block (Grid of Cells)

A block of drawing instructions in a source text is called a drawing block and enlcosed with a begin marker of !draw! and end marker of !end!.

 paper "Source" -; ball "Draw.pm" -; paper "Output"

This block will produce the following SVG drawing:

Source Draw.pm Output Inline SVG not supported by your browser

A drawing block forms a grid structure. It consists of rows delimited by new lines and columns delimited by semicolons. A column is called cell and includes a drawing instruction for one figure.

  cell; cell; ...
  cell; cell; ...

A grid of two rows by three columns:

Box 1.1 Box 1.2 Box 1.3 Box 2.2 Inline SVG not supported by your browser

was produced by a block:

 box "Box 1.1" -; box "Box 1.2" +; box "Box 1.3"
 ~; box "Box 2.2"

The first row contains three figures. The second row only contains a figure in the middle column. A column containing nothing or only a tilda (~) produces a blank cell, no figure in it. The number of cells in a row may vary line by line.

Cell (Shape with Text and Lines)

A cell portion contains an instruction to draw a figure (also called shape) with description text and/or lines to neighboring figures (called hands).

Syntax of a cell:

Syntax Description
shape "text" [hand] hand is optional
shape "" [hand] no text
~ blank cell

A shape is one of the following:

Shape Represents: SVG element
box Hardware such as PC or server Rounded-corner rectangle
ball software or process (shown as a rugby ball) Ellipse
paper File or resource Rectangle (polygon) with upper right corner cut
disk File system or folder Rectangle with double lines at top and bottom
~ Blank -
Box Ball Paper Disk Inline SVG not supported by your browser

A hand is a line drawn from the current cell to the neighbor cell. The line can be drawn to the right-side and/or immediately lower figure. A single-character symbol is used to denote a type of a hand:

Hand Direction
- Line to the right
| Line going down
+ Lines going to the right and down
~ No line drawn


Cell Description
box "Box" Just a box and a text
ball "Ball" - A rugby ball with a line connecting to the right figure
paper "Paper" + A paper with both the right and down lines
disk "Disk" | A disk with a line connecting to the figure below

How they look like in a horizontal order:

Box Ball Paper Disk Inline SVG not supported by your browser

Presented by Kobu.Com

2020-apr-16 first edition
2020-oct-09 japanese translation