Home > Authoring > Guide > Draw | English
SVGチャート生成ツールを使うと下記の例のような非常に簡単な構成図を限定的ではあるが簡単な命令を使ってことができます。
チャート生成ツールを使うと、四角や丸のような数種類の単純な形、説明テキスト、水平および垂直方向への接続線を描くことができます。
ソーステキスト中の、開始マーカーの!draw!と終了マーカーの!end!で囲まれた描画命令の集まりを描画ブロックと呼びます。
!draw!
paper "Source" -; ball "Draw.pm" -; paper "Output"
!end!
このブロックは次のようなSVG図を生成します。
描画ブロックは格子状の構造を持ちます。 改行で区切られた行とセミコロンで区切られた列からなります。 一個の列はセルと呼ばれ、一個の図形を描く描画命令を含みます。
!draw!
cell; cell; ...
cell; cell; ...
...
!end!
次は二行三列のセル群からなる図で、
下記の命令で生成したものです。
!draw!
box "Box 1.1" -; box "Box 1.2" +; box "Box 1.3"
~; box "Box 2.2"
!end!
最初の行は三つの図形を、二行目は中央のセルに一個だけ図形があります。 何も含まないあるいはチルダ（~）だけの列は空のセルで、図形を含みません。 行ごとに列の数が違ってもかまいません。
セルは図形、説明文、隣り合う図へ向かう線からなります。
セルの文法は次のとおりです。
| 書式 | 説明 |
|---|---|
| 図形 "説明文" [線] | 線は省略可 |
| 図形 "" [線] | 説明文なし |
| ~ | 空のセル |
図形には次のものがあります。
| 図形 | 指定方法 | 表現対象 | SVG要素 |
|---|---|---|---|
| 箱 | box | PCやサーバなどハードウェア | 角が丸い長方形 |
| 球 | ball | ソフトウェアやプロセス（ラグビーボール） | 楕円 |
| 紙 | paper | ファイルや資源 | 右上の角が取れた四角形 |
| ディスク | disk | ファイルシステムやフォルダ | 上下が二重線の四角形 |
| ~ | 空の図形 | - |
線は隣り合う右と下の図形へと引かれます。
線の引き方は一文字の記号で表します。
| 線 | 方向 |
|---|---|
| - | 右へ向かう線 |
| | | 下に降りる線 |
| + | 右と下の両方に向かう線 |
| ~ | 線は引かない |
例:
| セル | 説明 |
|---|---|
| box "Box" | 箱と説明文 |
| ball "Ball" - | 球と右へ向かう線 |
| paper "Paper" + | 紙と右と下へ向かう線 |
| disk "Disk" | | ディスクと下へ向かう線 |
上記を横に並べた様子です。
提供: 横浜工文社 Kobu.Com
2020-apr-16 first edition
2020-oct-09 japanese translation