dot_ix_playground 0.2.0

Interactive dot graphs playground web application.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

---
direction: vertical
hierarchy:
  a:
    a0:
      a00:
    a1:
  b:
    b0:
  c:
  d:

node_infos:
  a:
    emoji: 🛠️
    name: "Node A"
    desc: >
      Contains things to
      do with A.

      More description
  a0: { emoji: 🔨, name: "A0", desc: "something to do with A0" }
  a1: { emoji: ⚙️, name: "A1" }
  b : { name: "B" }
  b0: { name: "B0" }
  c:  { name: "C" }
  d:  { name: "D" }

edges:
  ab: [a, b]
  a0a1: [a00, a1]
  a0b0: [a0, b0]
  bc: [b, c]
  bd: [b, d]

node_tags:
  a: [tag_0]
  a0: [tag_1]
  a00: [tag_2]
  a1: [tag_1]
  b: [tag_0]
  b0: [tag_1]
  c: [tag_1, tag_2]
  d: [tag_2]

# tags are not necessarily associated with a node.
tags:
  tag_0: { name: "Tag 0", desc: "Some information for tag 0." }
  tag_1: { name: "Tag 1" }
  tag_2: { name: "Tag 2" }

tailwind_classes:
  a0: &blue >-
    [&>path]:fill-blue-300
    [&>path]:stroke-1
    [&>path]:stroke-blue-600
    [&>path]:hover:fill-blue-200
    [&>path]:hover:stroke-blue-600
    [&>path]:focus:fill-lime-200
    [&>path]:focus:outline-1
    [&>path]:focus:outline-lime-600
    [&>path]:focus:outline-dashed
    [&>path]:focus:rounded-xl
    cursor-pointer
  a1: *blue

  tag_2: >-
    [&>path]:fill-blue-200
    [&>path]:stroke-blue-500
    [&>path]:hover:fill-blue-100
    [&>path]:hover:stroke-blue-400
    [&>path]:focus:fill-lime-200
    [&>path]:focus:outline-1
    [&>path]:focus:outline-lime-600
    [&>path]:focus:outline-dashed
    [&>path]:focus:rounded-xl
    cursor-pointer