グラフ(Dot)の記述

Snow Flower Text では Dot 言語によるグラフの作図をサポートしています。 Snow Flower Text では GraphViz 互換エンジンを内蔵していますので、 追加のインストールなしに利用を始めることができます。

このエンジンはクロスプラットフォーム技術で実装されておりプラットフォームによる動作の差異が全くありません。またエンジンはプロセスではなく、スレッドで駆動されますので、システム負荷が少なく非常に高速に動作しリアルタイムプレビューを快適にしています。

Graphviz（Graph Visualization Software）は AT&T研究所が開発したオープンソースのグラフレンダリングパッケージでDOT言語のスクリプトで示されたグラフを描画します。

使い方

AsciiDoc の [graphviz] ブロックに dot シンタックスを記述することで Dot の図が文書に埋め込む事ができます。

  1. シンタックスに AsciiDoc を選択します。

  2. Dotの記述には graphviz ブロックを使用します。メニュ > 挿入 > グラフ のメニューからDotのテンプレートを文書に挿入できます。

  3. 以上です。

簡単な例 
[graphviz]
--------------------------------------------
digraph{
 a->b
}
--------------------------------------------
レンダリング結果

レイアウトの種類

Graphviz ではレイアウトアルゴリズムを変更することで簡単にレイアウトを変更することが出来ます。

graphviz ブロックの layout 属性で自動レイアウトアルゴリズムを指定できます。デフォルトでは dot レイアウトになりますが、綺麗にレイアウトされるアルゴリズムを選択することをお勧めします。

[graphviz]
--------------------------------------------
graph{
  graph[layout=レイアウト]
  ...
}
--------------------------------------------
dot

ドットエンジンはエッジの方向にランクにより整列します。デフォルトでは、方向は上から下方向に設定されています。

neato

neato エンジンはスプリングモデルのレイアウトを提供します。グラフが大きすぎず（100ノード未満）、グラフの特徴について他に何も知らない場合、これは適切なエンジンです。

twopi

twopiエンジンは放射状のレイアウトを提供します。ノードは、与えられたルート・ノードからの距離に応じて同心円上に配置されます。

circo

circo は円形のレイアウトを提供します。これは、特定の通信ネットワークのような複数の環状構造の図に適しています。

fdp
osage

osage は配列型のレイアウトを提供します。

patchwork

ノードの形状

[graphviz]
--------------------------------------------
digraph{
	a[shape=ノードの形状]
}
--------------------------------------------
box
polygon
ellipse
oval
circle
point
egg
triangle
plaintext
plain
diamond
trapezium
parallelogram
house
pentagon
hexagon
septagon
octagon
doublecircle
doubleoctagon
tripleoctagon
invtriangle
invtrapezium
invhouse
Mdiamond
Msquare
Mcircle
rect
rectangle
square
star
none
underline
note
tab
folder
box3d
rarrow
larrow

ノードのスタイル

[graphviz]
--------------------------------------------
digraph{
  a[style=ノードのスタイル]
}
--------------------------------------------
solid
dashed
dotted
bold

矢印の形状

[graphviz]
--------------------------------------------
digraph{
  a -> b[arrowhead=矢印の形状]
}
--------------------------------------------
box
crow
dot
diamond
inv
none
tee
vee

フォント

フォントを変更したい場合は、fontname 属性にフォント名を記述することで変更できます。

digraph {
  node [fontname=フォント名];
  ...
}

フォント名の変更はシステム依存性が高くなりますのでフォントの選び方には注意が必要になりますが、Web の CSS と同様にフォントのフォールバック動作があるので、Webと同様に複数のフォントを指定するアプローチで依存性を軽減できます。また指定したメトリクス互換フォントがない環境でもテキストの幅は表示環境によって自動調整されます。

sans-serif とserif と monotype の例を挙げます。

fontname=”Helvetica Neue, Helvetica,Arial,sans-serif”
fontname=”Georgia,serif”
fontname=”Courier, Courier New,monotype”
メトリック互換フォントは メトリクスが一致しているフォントです。メトリクス (文字の大きさ)が一致していることでフォントを置き換えても文書のレイアウトが崩れることはありません。
メトリック互換フォントの組み合わせ例

  • Helvetica, Arial, Liberation Sans

  • Times, Times New Roman, Liberation Serif

  • Courier, Courier New, Liberation Mono

色名

  • Whites

    • ■ antiquewhite

    • ■ azure

    • ■ bisque

    • ■ blanchedalmond

    • ■ cornsilk

    • ■ oralwhite

    • ■ gainsboro

    • ■ ghostwhite

    • ■ honeydew

    • ■ ivory

    • ■ lavender

    • ■ lavenderblush

    • ■ lemonchiffon

    • ■ linen

    • ■ mintcream

    • ■ mistyrose

    • ■ moccasin

    • ■ navajowhite

    • ■ oldlace

    • ■ papayawhip

    • ■ peachpuff

    • ■ seashell

    • ■ snow

    • ■ thistle

    • ■ wheat

    • ■ white

    • ■ whitesmoke

  • Greys

    • ■ darkslategray

    • ■ dimgray

    • ■ gray

    • ■ gray

    • ■ lightgray

    • ■ lightslategray

    • ■ slategray

  • Blacks

    • ■ black

  • Reds

    • ■ coral

    • ■ crimson

    • ■ darksalmon

    • ■ deeppink

    • ■ rebrick

    • ■ hotpink

    • ■ indianred

    • ■ lightpink

    • ■ lightsalmon

    • ■ maroon

    • ■ mediumvioletred

    • ■ orangered

    • ■ palevioletred

    • ■ pink

    • ■ red

    • ■ salmon

    • ■ tomato

    • ■ violetred

  • Browns

    • ■ beige

    • ■ brown

    • ■ burlywood

    • ■ chocolate

    • ■ darkkhaki

    • ■ khaki

    • ■ peru

    • ■ rosybrown

    • ■ saddlebrown

    • ■ sandybrown

    • ■ sienna

    • ■ tan

  • Oranges

    • ■ darkorange

    • ■ orange

    • ■ orangered

  • Yellows

    • ■ darkgoldenrod

    • ■ gold

    • ■ goldenrod

    • ■ greenyellow

    • ■ lightgoldenrod

    • ■ lightgoldenrodyellow

    • ■ lightyellow

    • ■ palegoldenrod

    • ■ yellow

    • ■ yellowgreen

  • Greens

    • ■ chartreuse

    • ■ darkgreen

    • ■ darkolivegreen

    • ■ darkseagreen

    • ■ forestgreen

    • ■ green

    • ■ greenyellow

    • ■ lawngreen

    • ■ lightseagreen

    • ■ limegreen

    • ■ mediumseagreen

    • ■ mediumspringgreen

    • ■ mintcream

    • ■ olivedrab

    • ■ palegreen

    • ■ seagreen

    • ■ springgreen

    • ■ yellowgreen

    • ■ Cyans

    • ■ aquamarine

    • ■ cyan

    • ■ darkturquoise

    • ■ lightcyan

    • ■ mediumaquamarine

    • ■ mediumturquoise

    • ■ paleturquoise

    • ■ turquoise

  • Blues

    • ■ aliceblue

    • ■ blue

    • ■ blueviolet

    • ■ cadetblue

    • ■ corn

    • ■ owerblue

    • ■ darkslateblue

    • ■ deepskyblue

    • ■ dodgerblue

    • ■ indigo

    • ■ lightblue

    • ■ lightskyblue

    • ■ lightslateblue

    • ■ mediumblue

    • ■ mediumslateblue

    • ■ midnightblue

    • ■ navy

    • ■ navyblue

    • ■ powderblue

    • ■ royalblue

    • ■ skyblue

    • ■ slateblue

    • ■ steelblue

  • Magentas

    • ■ blueviolet

    • ■ darkorchid

    • ■ darkviolet

    • ■ magenta

    • ■ mediumorchid

    • ■ mediumpurple

    • ■ mediumvioletred

    • ■ orchid

    • ■ palevioletred

    • ■ plum

    • ■ purple

    • ■ violet

    • ■ violetred

関連文書

参考

de
en
fr
ja

Download on the Mac App Store