1 Table of Contents

2 About

3 Features

• text input (.gr files)
• fine-tuned control over node and edge looks and positions
• arbitrary nesting of sub-graphs
• configurable layouter per (sub-)graph
  • currently supported: grid, border, table, fixed
• implicit or explicit node declarations
• edge-style shortcuts: -> (solid), >> (bold), .> (dotted), => (dashed), ~> (invisible), — (undirected)
• reverse edges (<-, <<, <., <=, <~)
• edge labels
• edge arrow rotation snapping (0..100%)
• edge position snapping (with configurable threshold)
• variable-width edges (start / end widths)
• edge outlines (left / right widths and colors, adaptive width mode)
• user-definable node ports (edge connection locations)
  • explicit or automatic port layout with configurable edge margins
  • built-in cardinal points n, w, s, e (t, l, b, r)
• style classes (with inheritance)
• include files (.gi)
  • e.g. for separating style definitions from content
• (user-definable) palettes (named colors)
• (user-definable) background and border gradients
  • arbitrary number of stops (/starts)
  • automatic interpolation of implicit start positions
• background and border fill patterns
• background and border shapes
  • currently supported: rect, round, rhomb (more to come in future releases)
• icons
• rotatable content (clockwise, counter-clockwise)
• node stacks
• straight, rectangular, and cubic bezier curve edges
• size groups
• border blend modes (srcover, additive, srccolor, dstcolor)
• can also be used to generate user interfaces with support for custom widget classes
  • the GraphForm widget can be used in custom applications
  • XMLForm (.xfm) UI descriptions can be mixed with .gr (in the same file / buffer)
• scalable vector graphics .svg file export
• batch processing mode
  
  

4 Examples

4.1 test1.gr

nodes and edges, baseline alignment

Source:

style {
  pad_t        = 8
  pad_b        = 8
  text_pos     = baseline
  align        = "expand;baseline"
  edge_bend    = 30%
  border_style = solid
  border_width = 2
  border_color = #555
  shape        = rect
  tail_snap_y  = 0
}

zero_margin = false

A->B->C

A [bgcolor=#eaa font=big8 border_color=#a55]
B [bgcolor=#aea font=big6 border_color=#5a5 ipad_r=3 ]
C [bgcolor=#aae font=big5 border_color=#55a ipad="0;3;0;4"]
 

4.2 test30.gr

bgfill node attribute and round shape test
(SVG)
Source:

// "bgfill" node attribute and round shape test

style def {
   pad                = 4,6,4,6
   bgfill             = false
   border_shape       = round
   shape_round_amount = 30%
   shape_round_aspect = "2"
   shape_round_limit  = 8
   border_style       = solid
   border_width       = 0.75
   font               = big8
   fgcolor            = #444
   arrow_angle        = 25
   arrow_len          = 12
   arrow_ilen         = 20%
   ipad               = 1,4,1,4
}

style padt {
  def
  pad_t = 20
}

style esmall {
  def
  arrow_angle = 33
  arrow_len   = 6
}

graph {
   layout      = fixed;
   col_padding = 2;
   zero_margin = true;
   xmajor_tail = false;
   xmajor_head = true;

   class=def  row="a   b c"
   class=padt row=" d e f"

   a "node a";
   b "node b";
   c "node c";

   f [ipad=2,8,2,8]

   a->b
   b->c

   class=esmall
   d->e
   a->d
   b<>f [arrow_snap=1 arrow_fgcolor_rev=#888
         arrow_angle_rev=30 arrow_len_rev=8
         ]
   e->f [bend=20%]
   f->c [xmajor_tail=true xmajor_head=false]
}
 

4.3 test24.gr

fixed layout test, edge labels, variable edge widths and patterns, edge outlines, arrow snapping, colorization (tint)
(SVG)
(tkui / OpenGL)
Source:

// fixed / manual node placement (e.g. for smaller, non-autogenerated graphs)

style rowbase {
   bgcolor            = #eee
   shape              = round
   shape_round_amount = 40%
   shape_round_limit  = 10
   border_width       = 1.5
   border_color       = #bbb
   ipad               = "2.5;6;2.5;6"
   align              = baseline
}

style row1 {
   rowbase
   fgcolor = #003
}

style row2 {
   rowbase
   fgcolor = #034
}

style row3 {
   rowbase
   fgcolor = #048
}

style row4 {
   rowbase
   fgcolor = #333
}

style red {
   rowbase
   fgcolor     = #048
   bgcolor     = #f4ece4
   border_tint = #4fff0000
}

style yellow {
   rowbase
   fgcolor     = #048
   bgcolor     = #f4f4e0
   border_tint = #6f7f7f00
}

style green {
   rowbase
   bgtint      = #0600ff00
   border_tint = #4f007f00
}

style green2 {
   rowbase
   tint = #0500ff00
}

style blue {
   rowbase
   bgtint      = #060000ff
   border_tint = #3800007f
}

style edgebase {
   arrow_snap         = 40%
   bend               = 30%
   arrow_len          = 7
   edge_width         = 1
   edge_width_start   = 0.25
   edge_width_end     = 2.0
   edge_width_exp     = 1.5
}

style edge1 {
   edgebase
   fgcolor     = #050
   border_tint = #1f00ff00
}

style edge1rev {
   edge1
   edge_width_start   = 2.0
   edge_width_end     = 0.25
}

style edge2 {
   edgebase
   fgcolor            = #c50
   arrow_len          = 10
   arrow_border_width = 1
   arrow_border_color = #e61
   border_tint        = #1fff8000
   edge_width         = 3.5
   edge_width_start   = 0.25
   edge_width_end     = 3
   edge_width_left    = 1.0
   edge_width_right   = 1.0
   edge_fgtint_left   = #6fee6611
   edge_fgtint_right  = #6fee6611
}

style edge2_eg {
   edge2
   edge_fgtint_left   = #9f000000
   edge_fgtint_right  = #9f000000
   arrow_border_width = 1
   arrow_border_color = #773308
}

style edge2_gi {
   edgebase
   fgcolor            = #aaa
   arrow_len          = 10
   arrow_border_width = 1
   arrow_fgcolor      = #aba
   arrow_border_color = #898
   border_tint        = #1fafff00
   edge_width         = 3
   edge_width_start   = 0.25
   edge_width_end     = 3
   edge_width_left    = 1.0
   edge_width_right   = 1.0
   edge_fgtint_left   = #af7e9674
   edge_fgtint_right  = #af7e9674
}

style edge3 {
   edgebase
   fgcolor     = #05C
   border_tint = #1f007fff
}

style lb {
  bgcolor      = #ffe
  border_width = 0.5
  border_color = #d4d4d4
  ipad         = "0;1;0;1"
  shape        = rect//round
  font         = small
}

style lb_gi {
  lb
  label = "combobulate"
  tooltip = "to compose (one's self) / to compose, organize, design, or arrange"
  shape              = round
  shape_round_amount = 50%
  shape_round_limit  = 10
  ipad               = "1;4;1;4"
  label_fgcolor      = #555
}

graph main {
   layout      = fixed
   row_padding = 24
   zero_margin = true
   ipad        = 8

   label_class=lb

   // (note) nodes are always placed, even when not connected
   class=row1; row="abc "
   class=row2; row=" def"
   class=row3; row="  gh"
   class=row4; row="  i "

   a "Node A" [class=green border_width=3 border_tint=#60ffffff]
   b "Node B" [class=red   border_width=3 border_tint=#60ffffff]
   c "Node C" [class=blue  border_width=3 border_tint=#60ffffff]

   d "Row 2 Node D" [class=green]
   e "Row 2 Node E" [class=red  border_style=dotted] // border_width=8 bgfill=0
   f "Row 2 Node F" [class=blue border_style=dashed]

   g "Row 3 Node G" [class=yellow]
   h "Row 3 Node H" [class=blue   border_tint=#1f00007f]
   i "Row 4 Node I" [class=green2 border_tint=#20ffffff border_width=3]

   a->d"pandiculate"[class=edge1    tooltip="to stretch oneself"]
   d<.g"reiterate"  [class=edge1rev tooltip="to re-repeat. (not a real word)"
                                    label_relpos=35% pad_t=3]

   b>>e         [class=edge2    label="bumfuzzle" tooltip="to confuse"
                                align=top pad="12;0;5;0"]
   e>>g"jumble" [class=edge2_eg tooltip="to mix up in a confused or untidy way"
                                fgtint=#60cccc77]
   g>>i         [class=edge2_gi bend=25% label_class=lb_gi]

   class=edge3
   c => f "bamboozle"[tooltip="to trick so into sth"]
   f => h "unthaw"   [tooltip="to un-unfreeze. (not a real word)"]
   h => i "skedaddle"[tooltip="to leave immediately / run away"
                      bend=15% label_relpos=40% pad_l=3]
}
 

4.4 test26.gr

edge styles (normal ->, dotted .>, dashed =>, bold >>, invisible ~>, undirected --
(SVG) (tkui / OpenGL)
Source:

// fixed / manual node placement (e.g. for smaller, non-autogenerated graphs)

style rowbase {
   bgcolor            = #eee
   shape              = round
   shape_round_amount = 40%
   shape_round_limit  = 10
   border_width       = 1.5
   border_color       = #bbb
   ipad               = "2.5;6;2.5;6"
   align              = baseline
}

style row1 {
   rowbase
   fgcolor = #003
}

style row2 {
   rowbase
   fgcolor = #034
}

style row3 {
   rowbase
   fgcolor = #048
}

style row4 {
   rowbase
   fgcolor = #333
}

style red {
   rowbase
   fgcolor     = #048
   bgcolor     = #f4ece4
   border_tint = #4fff0000
}

style yellow {
   rowbase
   fgcolor     = #048
   bgcolor     = #f4f4e0
   border_tint = #6f7f7f00
}

style green {
   rowbase
   bgtint      = #0600ff00
   border_tint = #4f007f00
}

style green2 {
   rowbase
   tint = #0500ff00
}

style blue {
   rowbase
   bgtint      = #060000ff
   border_tint = #3800007f
}

style edgebase {
   arrow_snap         = 40%
   bend               = 30%
   arrow_len          = 7
   edge_width         = 1
   edge_width_start   = 0.25
   edge_width_end     = 2.0
   edge_width_exp     = 1.5
}

style edge1 {
   edgebase
   fgcolor     = #050
   border_tint = #1f00ff00
}

style edge1rev {
   edge1
   edge_width_start   = 2.0
   edge_width_end     = 0.25
}

style edge2 {
   edgebase
   fgcolor            = #c50
   arrow_len          = 10
   arrow_border_width = 1
   arrow_border_color = #e61
   border_tint        = #1fff8000
   edge_width         = 3.5
   edge_width_start   = 0.25
   edge_width_end     = 3
   edge_width_left    = 1.0
   edge_width_right   = 1.0
   edge_fgtint_left   = #6fee6611
   edge_fgtint_right  = #6fee6611
}

style edge2_eg {
   edge2
   edge_fgtint_left   = #9f000000
   edge_fgtint_right  = #9f000000
   arrow_border_width = 1
   arrow_border_color = #773308
}

style edge2_gi {
   edgebase
   fgcolor            = #aaa
   arrow_len          = 10
   arrow_border_width = 1
   arrow_fgcolor      = #aba
   arrow_border_color = #898
   border_tint        = #1fafff00
   edge_width         = 3
   edge_width_start   = 0.25
   edge_width_end     = 3
   edge_width_left    = 1.0
   edge_width_right   = 1.0
   edge_fgtint_left   = #af7e9674
   edge_fgtint_right  = #af7e9674
}

style edge3 {
   edgebase
   fgcolor     = #05C
   border_tint = #1f007fff
}

style lb {
  bgcolor      = #ffe
  border_width = 0.5
  border_color = #d4d4d4
  ipad         = "0;1;0;1"
  shape        = rect//round
  font         = small
}

style lb_gi {
  lb
  label = "combobulate"
  tooltip = "to compose (one's self) / to compose, organize, design, or arrange"
  shape              = round
  shape_round_amount = 50%
  shape_round_limit  = 10
  ipad               = "1;4;1;4"
  label_fgcolor      = #555
}

graph main {
   layout      = fixed
   row_padding = 24
   zero_margin = true
   ipad        = 8

   label_class=lb

   // (note) nodes are always placed, even when not connected
   class=row1; row="abc "
   class=row2; row=" def"
   class=row3; row="  gh"
   class=row4; row="  i "

   a "Node A" [class=green border_width=3 border_tint=#60ffffff]
   b "Node B" [class=red   border_width=3 border_tint=#60ffffff]
   c "Node C" [class=blue  border_width=3 border_tint=#60ffffff]

   d "Row 2 Node D" [class=green]
   e "Row 2 Node E" [class=red  border_style=dotted] // border_width=8 bgfill=0
   f "Row 2 Node F" [class=blue border_style=dashed]

   g "Row 3 Node G" [class=yellow]
   h "Row 3 Node H" [class=blue   border_tint=#1f00007f]
   i "Row 4 Node I" [class=green2 border_tint=#20ffffff border_width=3]

   a->d"pandiculate"[class=edge1    tooltip="to stretch oneself"]
   d<.g"reiterate"  [class=edge1rev tooltip="to re-repeat. (not a real word)"
                                    label_relpos=35% pad_t=3]

   b>>e         [class=edge2    label="bumfuzzle" tooltip="to confuse"
                                align=top pad="12;0;5;0"]
   e>>g"jumble" [class=edge2_eg tooltip="to mix up in a confused or untidy way"
                                fgtint=#60cccc77]
   g>>i         [class=edge2_gi bend=25% label_class=lb_gi]

   class=edge3
   c => f "bamboozle"[tooltip="to trick so into sth"]
   f => h "unthaw"   [tooltip="to un-unfreeze. (not a real word)"]
   h => i "skedaddle"[tooltip="to leave immediately / run away"
                      bend=15% label_relpos=40% pad_l=3]
}
 

4.5 test32f.gr

improve SVG export

(SVG) (tkui / OpenGL)
Source:

// "pixel_layout=grid" row+col span and layout weights test.
//  invisible connection "port" nodes. edge_shape=rcurve.

style def {
  align                = expand
  arrow_len            = 9
  arrow_angle          = 25
  arrow_ilen           = 15%
  border_width         = 1.25
  border_color         = #666
  shape                = round
  shape_round_amount   = 40%
  shape_round_limit    = 10
  shape_round_aspect   = 5
  pad_l                = 64
  pad_r                = 0
  bg_pattern           = zigzag_4
  bg_pattern_intensity = 0.06
}

style invis {
  def
  shape       = none
  label_style = none
  align       = left,centery
  pad_h       = 0
}

style lb {
  bgcolor      = #ffe
  border_width = 0.5
  border_color = #d4d4d4
  ipad         = "0;1;0;1"
  shape        = rect
  font         = small
  text_pos     = center
  label_style  = default
}

gradient darklight {
  #ffffffff
  0.5  = #80ffffff
  0.6  = #10ffffff
  0.7  = #00000000
  0.75 = #10333333
  0.85 = #08000000
         #40000000
}

gradient darklightr {
  #20000000
  0.5  = #08000000
  0.6  = #10cccccc
  0.75 = #10ffffff
  0.85 = #20ffffff
         #ffffffff
}

gradient darklightr2 {
  #20000000
  0.5  = #08000000
  0.6  = #10cccccc
  0.75 = #10ffffff
  0.85 = #20ffffff
         #5fffffff
}

gradient darklightm {
         #20ffffff
  0.5  = #10ffffff
         #30000000
}

style bcd {
  bg_gradient        = darklightm
  bg_gradient_shape  = r
  shape_round_amount = 40%
  shape_round_limit  = 30
  bg_pattern         = lines_4
  pad_l              = 48
}

style rcurve {
  edge_shape=rcurve arrow_shape=none
}

style e {
  def
  bgcolor              = #dff
  bg_gradient          = darklightr
  bg_gradient_shape    = h
  bg_pattern_intensity = 0.04
  s                    = 32,100%
  align                = centery,right
  headpoint_amount     = 22%
  rotate               = cw
}

bgcolor      = #fafcf9;
layout       = fixed;
xmajor       = true;
zero_margin  = true;
row_padding  = 16;
col_padding  = 8;

row="h   e";
row="a   e";
row="a1 be";
row="a24ce";
row="a3 de";
row="a   e";
row="g   e";
row="fffff";

a "Rotated Node A" [rotate=ccw bgcolor=#fdd w=48 h=95% ipad_h=10
                    align=center
                    bg_gradient=darklightr2 bg_gradient_shape=h bg_pattern_intensity=0.04
                    ]
b [bgcolor=#fed s=48,32      align=center pad_b=0 class=bcd]
c [bgcolor=#dff s=48,32      align=center pad_v=6 class=bcd]
d [bgcolor=#ddf s=48,32      align=center pad_t=0 class=bcd]
e "Rotated Node E" [class=e]
f [bgcolor=#ffd w=100% h=32  align=centery pad=24,0,0,0
   bg_pattern=lines_4 bg_gradient=darklight bg_gradient_shape=v
   ]

class=invis
1 [s=0,16 align=bottom pad_v=4 ]
2 [s=0,16              pad_v=4 ]
3 [s=0,16 align=top    pad_v=4 ]
4 [s=4.5               pad_v=4 pad_l=48 shape=round bgcolor=#000 helper=true]
g [s=32,8]
h [s=32,8]

label_class=lb

1--4 "a->b" [class=rcurve pad_b=16 pad_r=0]
2--4 "a->c" [class=rcurve pad_r=0]
3--4 "a->d" [class=rcurve pad_t=16 pad_r=0]

4->b [bend=10% arrow_snap=90% xmajor_tail=false ]
4->c [bend=10%]
4:n->d [bend=10% arrow_snap=90%]

b->e "b->e" [bend=10%]
c->e "c->e" [bend=10%]
d->e "d->e" [bend=10%]

a.>f "a.>f" [bend=20%]

d=>f "d=>f" [bend=20%]
e>>f "e>>f" [bend=20% edge_width_start=0.5]
 

4.6 test39.gr

node connection ports and include file test
(SVG) (tkui / OpenGL)
Source:

// port margins

include diagram.gi

col_padding=20
row_padding=20

style def {  // (note) update style 'def' (initially declared in 'diagram.gi')
  bgcolor = #eef8fa
  edge_width         = 3.5
  edge_width_start   = 0.25
  edge_width_end     = 3
  edge_width_left    = 2.0
  edge_width_right   = 2.0
  edge_fgtint_left   = #6ffcfcfc
  edge_fgtint_right  = #6ffcfcfc
}

row="abc"
row="def"
row="geh"
row="ijk"

e [s=128] ports {
  margin = 25%,80%,75%,40%
  t1:t t2:t t3:t
  l1:l l2:l
  b1:b b2:b b3:b
  r1:r r2:r
}

a->e:t1 b->e:t2 c->e:t3
d->e:l1 g->e:l2
f->e:r1 h->e:r2
i->e:b1 j->e:b2 k->e:b3
 

4.7 test37.gr

node and sub-graph stacks
(SVG)
Source:

// stacks

style def {
  bgcolor=#eee
  border_width=1.5
  shape=rect
}

layout=fixed
row="abc"
row="def"

a->b->c
d->e->f

b [stack=3]

f [stack=3 stack_off=6,7] {
  layout       = table
  shape        = rect
  border_width = 1
  ipad         = 1

  row="ab"
  row="c "

  a "CONST"          [border_width=1 border_dir=right font=small bgtint=#20eeee00]
  b "REGS"           [border_width=0 font=small bgtint=#20eeee00]
  c "Shader Unit(s)" [border_width=1 border_dir=top ipad=8]
} 

4.8 test35.gr

improve SVG export

(SVG) (tkui / OpenGL)
Source:

// gradients

style {
  bgtint       = #eee
  shape        = round
  border_width = 1.5
  s            = 64,64
}

gradient greenblue {
  #6f66ff99
  #6f6699ff
}

gradient greenblue_multi {
         #af2255aa
  0.05 = #af4477dd
  0.35 = #af8ace8a
         #af4679df
  0.85 = #ff408060
         #ff167f39
}

gradient blueyellow {
  #7040a0f0
  #70f0f0a0
}

gradient blueyellow_multi {
  #a0303000
  #a05080b0
}

gradient darklight {
  #ffffffff
  0.4 = #a0ffffff
  0.6 = #10ffffff
  0.7 = #10000000
  #50000000
}

layout = fixed
row="abc"
row="def"
a->b->c
c->d[arrow_snap=80%]
d->e->f

a[bg_gradient=greenblue             bg_gradient_shape=v
  border_gradient=greenblue_multi   border_gradient_shape=v
  border_color=#aaa
  ]
b[bg_gradient=blueyellow            bg_gradient_shape=h
  border_gradient=blueyellow_multi  border_gradient_shape=h
  border_color=#666
  ]
c[bg_gradient=darklight             bg_gradient_shape=r
  border_color=#000
  bgcolor=#eec
  ]

d[bg_gradient=darklight     bg_gradient_shape=h
  border_color=#888
  bgcolor=#eec
  bg_pattern=lines_4        bg_pattern_intensity=0.2
  border_pattern=checker_1  border_pattern_intensity=0.9
  ]

e[bg_gradient=darklight     bg_gradient_shape=v
  border_color=#888
  bgcolor=#eec
  bg_pattern=lines_4        bg_pattern_intensity=0.2
  border_pattern=checker_1  border_pattern_intensity=0.9
  ]

f[bg_gradient=darklight     bg_gradient_shape=r
  border_color=#888
  bgcolor=#eec
  bg_pattern=lines_4        bg_pattern_intensity=0.2
  border_pattern=checker_1  border_pattern_intensity=0.9
  ]
 

4.9 test23d.gr

table layout test, nested sub-graphs, palettes
(SVG)
Source:

// table layout test (alternative long-id row syntax,
//  nested sub-graph in table cell, nested table in sub-graph)

style default {
  bgcolor = #eeeeee
  fgcolor = #000000
}

style tbl_hdr {
  bgcolor      = #eee
  fgcolor      = #777
  border_style = solid
  border_width = "1"
  border_color = #666
  border_dir   = bottom
  align        = expandx
}

style tbl_def {
  default
}

style tbl_inv {
  bgcolor = #000000
  fgcolor = #ffffff
}

style tbl_small {
  bgcolor = #eeeeee
  fgcolor = #555555
  font    = small
}

style tbl_big {
  bgcolor = #eeffff
  fgcolor = #557777
  font    = big7
}

style tbl_k {
  default
  font     = small
  text_pos = right
}

style def {
   bgcolor = #ddd;
   fgcolor = #007;
}

style sub {
   bgcolor = #e4e4c8;
   fgcolor = #022;
}

style subtable_b {
   bgcolor      = #fff8e0;
}

style subtable_3 {
   bgcolor      = #f4e4c8;
   fgcolor      = #022;
   text_pos     = left;
   shape        = rect;
   border_width = 0;
}

palette arrow {
   red = #d51
}

a[align=top]->b [arrow_fgcolor=arrow.red bend=30%]

// (note) table sub graphs look like a single cell to other graphs
// (note) layouting merely affects the _inner_ node placement of the sub graph cell
graph T {
   layout       = table;
   border_width = 1;
   ipad         = 1.0
   
   // table layout:
   class=tbl_hdr;   row="nodeA|     |nodeB|     |nodeC";
   class=tbl_def;   row="nodeD|nodeE|nodeF|nodeG|nodeH";
   class=tbl_big;   row="nodeI|     |nodeJ|     |     ";
   class=tbl_def;   row="nodeK|     |     |     |     ";

   // table cell details:
   nodeA "Header Cell A" [bgcolor=#eef2ee];
   nodeB "Header Cell B" [bgcolor=#def2f2];
   nodeC "Header Cell C" [bgcolor=#f2f2de];

   nodeD "Small Cell D" [bgcolor=#e0f0e0 align=baseline];
   nodeE "Small Cell E" [bgcolor=#d0f0f0 align=baseline];
   nodeF "Cell F"       [class=tbl_inv align="left;top" pad=0];
   nodeG "Small Cell G" [class=tbl_def] {
      cell_slant  = true;
      zero_margin = false; // allow padding at the sides
      ipad        = "2;0;2;0"
      bgtint      = #04000000

      a "Node A" [class=tbl_small align=bottom];

      graph b {
         unfold       = false
         rotate       = true;
         shape        = round;
         border_style = solid;
         border_width = 1;
         border_color = #f00;
         pad          = "4;4;4;4"
         ipad         = "3;6;3;6"

         class=sub;
         1 "Sub 1" [shape_round_amount=42% border_width=1 border_color=#eeeed8];
         2 "Sub 2" [shape_round_amount=42% border_width=1 border_color=#eeeed8];
         3 [class=subtable_3];
         3 "Sub 3" {
           layout             = table;
           ipad               = "2;4;2;4";
           shape              = round;
           shape_round_amount = 20%;
           shape_round_limit  = 7;
           border_style       = solid;
           border_width       = 1;
           border_color       = #000;

           class=subtable_3; row="a b c";
           class=subtable_3; row="defgh";
           class=subtable_3; row="i j  ";
           class=subtable_3; row="k    ";

           f "f..";
         } ;
         3 [class=subtable_3]; // merge bgcolor
         1->2;
         1->3;
      }

      b [class=subtable_b pad_l=4]  // merge bgcolor

      class = tbl_small;
      c "Node C" [pad_l=16 align=bottom];

      a->b [arrow_fgcolor=arrow.red arrow_snap=75%];
      b->c [arrow_fgcolor=arrow.red arrow_snap=75%];
   }
   nodeH "Small Cell H" [bgcolor=#d0d0c0 align=bottom];

   class=tbl_big;
   nodeI "Big Cell I" [bgcolor=#d0d0d0];
   nodeJ "Big Cell J" [bgcolor=#c0d8d8];

   nodeK [class=tbl_k];
}

b->T [arrow_fgcolor=arrow.red  arrow_snap=65%];
 

4.10 test41a.gr

solid, dotted, dashed and stacked rect shapes
(SVG)
(tkui / OpenGL)
Source:

// solid dotted, dashed and stacked rect shapes

style {
  bgcolor         = #eee
  shape           = rect
  blend           = srcover
  border_width    = 2
  border_color    = #666
  w               = 74
  ipad_v          = 6
  stack_alpha_dcy = 0.7
  align             = left,top
}

graph {
  layout = fixed
  ipad   = 8,16,8,16

  row="abc"
  row="def"
  
  a [border_style=solid]
  b [border_style=dotted]
  c [border_style=dashed]
  a->b->c

  d [border_style=solid  stack=3 stack_alpha_exp=0.9]
  e [border_style=dotted stack=3 stack_alpha_exp=1.7]
  f [border_style=dashed stack=3 stack_alpha_exp=2.3]
  d->e->f
}
 

4.11 test41b.gr

solid, dotted, dashed and stacked rect shapes
(SVG)
(tkui / OpenGL)
Source:

// solid dotted, dashed and stacked round shapes

style {
  bgcolor         = #eee
  shape           = round
  blend           = srcover
  border_width    = 2
  border_color    = #666
  w               = 74
  ipad_v          = 6
  stack_alpha_dcy = 0.7
  align           = left,top
}

graph {
  layout = fixed
  ipad   = 8,16,8,16

  row="abc"
  row="def"
  
  a [border_style=solid]
  b [border_style=dotted]
  c [border_style=dashed]
  a->b->c

  d [border_style=solid  stack=3 stack_alpha_exp=0.9]
  e [border_style=dotted stack=3 stack_alpha_exp=1.7]
  f [border_style=dashed stack=3 stack_alpha_exp=2.3]
  d->e->f
}
 

4.12 test41.gr

solid, dotted, dashed and stacked rhomb shapes
(SVG)
(tkui / OpenGL)
Source:x

// solid, dotted, dashed and stacked rhomb shapes

style {
  bgcolor         = #eee
  shape           = rhomb
  blend           = srcover
  border_width    = 2
  border_color    = #666
  w               = 53
  shape_rhomb_tx  = 16
  shape_rhomb_ty  = 2
  ipad_v          = 6
  stack_alpha_dcy = 0.7
}

graph {
  layout = fixed
  ipad   = 8,16,8,16

  row="abc"
  row="def"
  
  a [border_style=solid]
  b [border_style=dotted]
  c [border_style=dashed]
  a->b->c

  d [border_style=solid  stack=3 stack_alpha_exp=0.9]
  e [border_style=dotted stack=3 stack_alpha_exp=1.7]
  f [border_style=dashed stack=3 stack_alpha_exp=2.3]
  d->e->f
}
 

4.13 test42.gr

solid, dotted, dashed and stacked ellipse shapes
(SVG)
(tkui / OpenGL)
Source:

// solid, dotted, dashed and stacked ellipse shapes

style {
  bgcolor          = #eee
  shape            = ellipse
  blend            = srcover
  border_width     = 2
  border_color     = #666
  shape_ellipse_rx = 40
  shape_ellipse_ry = 0
  ipad_v           = 8
  stack_off        = 0.5,4
  stack_alpha_dcy  = 0.7
  align            = left,top
}

graph {
  layout = fixed
  ipad   = 8,16,8,16

  row="abc"
  row="def"

  a [border_style=solid]
  b [border_style=dotted]
  c [border_style=dashed]
  a->b->c

  d [border_style=solid  stack=3 stack_alpha_exp=0.9]
  e [border_style=dotted stack=3 stack_alpha_exp=1.7]
  f [border_style=dashed stack=3 stack_alpha_exp=2.3]
  d->e->f
}
 

4.14 test42b.gr

tinted, dashed and stacked ellipse shapes
(SVG)
(tkui / OpenGL)
Source:

// tinted, dashed and stacked ellipse shapes

style {
  bgcolor          = #d9d9d9
  fgcolor          = #fff
  shape            = ellipse
  blend            = srcover
  border_width     = 2
  border_style     = dashed
  border_color     = #666
  shape_ellipse_rx = 40
  shape_ellipse_ry = 0
  ipad_v           = 8
  stack            = 3
  stack_off        = 0.5,4
  stack_alpha_dcy  = 0.7
  stack_alpha_exp  = 2.3
  align            = left,top
}

graph {
  layout = fixed
  ipad   = 8,16,8,16
  bgcolor = #f9f9f9

  row="abc"
  row="def"

  a [bgtint=#90ff0000 border_tint=#40ff0000]
  b [bgtint=#90ffff60 border_tint=#40ffff60]
  c [bgtint=#908080ff border_tint=#408080ff]

  d [bgtint=#90ff7f00 border_tint=#40ff7f00]
  e [bgtint=#907fff60 border_tint=#407fff60]
  f [bgtint=#90c080ff border_tint=#40c080ff]

}
 

4.15 test43.gr

solid, dotted, dashed and stacked diamond shapes
(SVG)
(tkui / OpenGL)
Source:

// solid, dotted, dashed and stacked diamond shapes

style {
  bgcolor          = #eee
  shape            = diamond
  blend            = srcover
  border_width     = 2
  border_color     = #666
  shape_diamond_rx = 16
  shape_diamond_ry = 16
  ipad             = 16
  stack_off        = 0.5,5
  stack_alpha_dcy  = 0.7
}

graph {
  layout = fixed
  ipad   = 8,16,8,16

  row="abc"
  row="def"
  
  a [border_style=solid]
  b [border_style=dotted]
  c [border_style=dashed]
  a->b->c

  d [border_style=solid  stack=3 stack_alpha_exp=0.9]
  e [border_style=dotted stack=3 stack_alpha_exp=1.7]
  f [border_style=dashed stack=3 stack_alpha_exp=2.3]
  d->e->f
}
 

4.16 test44.gr

solid, dotted, dashed and stacked hexagon shapes
(SVG)
(tkui / OpenGL)
Source:

// solid, dotted, dashed and stacked hexagon shapes 
 
style { 
  bgcolor           = #ddd 
  shape             = hexagon 
  blend             = srcover 
  border_width      = 2 
  border_color      = #666 
  shape_hexagon_ax  = 2 
  shape_hexagon_ay  = 4 
  ipad              = 2 
  stack_off         = 3.5,3.5 
  stack_alpha_dcy   = 0.7 
  s                 = 35,50 
  align             = left,top 
  font              = small 
} 
 
graph { 
  layout = fixed 
  shape = rect 
  ipad   = 8,16,8,16 
  zero_margin = 1 
 
  row="abc" 
  row="def" 
   
  a [border_style=solid] 
  b [border_style=dotted] 
  c [border_style=dashed] 
  a->b->c 
 
  d [border_style=solid  stack=5 stack_alpha_exp=0.9] 
  e [border_style=dotted stack=5 stack_alpha_exp=1.7] 
  f [border_style=dashed stack=5 stack_alpha_exp=2.3] 
  d->e->f 
} 
 

4.17 test45.gr

solid, dotted, dashed and stacked triangle shapes
(SVG)
(tkui / OpenGL)
Source:

// solid, dotted, dashed and stacked hexagon shapes 
 
style { 
  bgcolor           = #ddd 
  shape             = hexagon 
  blend             = srcover 
  border_width      = 2 
  border_color      = #666 
  shape_hexagon_ax  = 2 
  shape_hexagon_ay  = 4 
  ipad              = 2 
  stack_off         = 3.5,3.5 
  stack_alpha_dcy   = 0.7 
  s                 = 35,50 
  align             = left,top 
  font              = small 
} 
 
graph { 
  layout = fixed 
  shape = rect 
  ipad   = 8,16,8,16 
  zero_margin = 1 
 
  row="abc" 
  row="def" 
   
  a [border_style=solid] 
  b [border_style=dotted] 
  c [border_style=dashed] 
  a->b->c 
 
  d [border_style=solid  stack=5 stack_alpha_exp=0.9] 
  e [border_style=dotted stack=5 stack_alpha_exp=1.7] 
  f [border_style=dashed stack=5 stack_alpha_exp=2.3] 
  d->e->f 
} 
 

4.18 test33.gr

UI widgets (Slider, ComboBox, CheckBox, FloatParam, Scroller, Dial), XFM attributes, size groups, colorization (tint)
(tkui / OpenGL)
Source:

// UI test

style {
  bgcolor = #eee
}

style CheckBox {
  fillBG      = 0
  iconSuffix  = _dark
  bgcolor     = #f9f9f9
}

flatten     = false
layout      = fixed
zero_margin = true
col_padding = 4
row_padding = 0.75
pad         = 8
ipad        = 4,4,4,4

row="abegj"
row="hc  j"
row="fd  j"
row="   ii"

a[w=150](Slider min=0 max=100 step=1
                bgtint=#0800ff00 fgtint=#400f604f align=top,left pad=0)
b       (CheckBox caption="Option A" selected=1)
c       (CheckBox caption="Option B" selected=1)
d       (CheckBox caption="Option C" selected=1)
e       (FloatParam cols=5 min=-10 max=10 step=1 mousePrecision=1 value=5)
f       (ComboBox options="One;Two;Three;Four"
                  bgtint=#18307fbf textPlacement=LEFT)
g[sh=3 align=expandy pad=0,4,0,0](Scroller vertical=1 min=0 max=100 step=1
                                           bgtint=#184888ff fgtint=#280f4f60)
h "First in SGX"  [sgx=lb1 align=right,baseline font=smaller]
i "Second in SGX" [sgx=lb1 align=left,baseline  font=smaller]
j[s=32](Dial min=0 max=100 reset=50 value=25
             fillbg=0 bgtint=#1800eeee fgtint=#ff000000)
 

5 Downloads

6 Usage

6.1 OpenGL Preview

% tks mydiagram.gr 

% tks -t mydiagram.gr 

% tks -lodpi -t mydiagram.gr 

6.2 Batch processing

% tks app:graph -cli -svg *.gr 

% tks app:graph -cli -svg -o svg/ *.gr 

6.2.1 Benchmark

% time tks app:graph -cli -svg -o svg/ *.gr 
2.33s user 0.05s system 96% cpu 2.455 total 
% ls -1 *.gr|wc -l 
      76 

6.3 Command Line Reference

7 Node declarations

a -> b 

Declares two nodes a and b, and a directed edge between them.
Output:

col_padding = 48 
a "Node A" 
b "Node B" 
a -> b "a->b" 

Declares two nodes a and b, a directed edge between them, and a label halfway along the edge.
Output:

7.1 Node Ports

e [s=128] ports { 
  margin = 25%,80%,75%,40% 
  t1:t t2:t t3:t 
  l1:l l2:l 
  b1:b b2:b b3:b 
  r1:r r2:r 
} 

write more documentation

8 Style classes

8.1 Declaration

8.2 Inheritance

style base { 
  bgcolor      = #eee 
  fgcolor      = #000 
  shape        = round 
  border_width = 1.5 
  ipad         = 2,5,2,5 
} 
 
style red { 
  base  // inherit attributes from style 'base' 
  tint = #40f00000 
} 
 
style green { 
  base  // inherit attributes from style 'base' 
  tint = #4000f000 
} 
 
style cyan { 
  base  // inherit attributes from style 'base' 
  tint = #2000f0f0 
} 
 
a [class=red] 
b [class=green] 
a -> b [class=cyan] 

Output:

9 Palettes

9.1 Declaration

palette mypalette { 
  red       = #f00 
  green     = #0f0 
  blue      = #00f 
  lightgray = #eeeeee 
} 

9.2 Select

10 Gradients

10.1 Declaration

gradient darklight { 
  #ffffffff 
  0.5  = #80ffffff 
  0.6  = #10ffffff 
  0.7  = #00000000 
  0.75 = #10333333 
  0.85 = #08000000 
         #40000000 
} 

write more documentation

10.2 Select

a "node A" [bg_gradient=darklight bg_gradient_shape=v] 

write more documentation

11 Attribute Reference

11.1 Type Names

11.2 Common Graph / Node / Edge Attributes

11.3 Graph Attributes

11.4 Common Graph / Edge Attributes

11.5 Common Graph / Node Attributes

11.6 Common Node / Edge Attributes

11.7 Node Attributes

11.8 Node Ports Attributes

11.9 Edge Attributes