Setting the file. One moment.
Graphviz Conventions · Writing Skills · obra/superpowers · Skills Docs
Back to the top of the page (opens in a new tab)
graphviz-conventions.dot
DOT · 172 lines · 6 KB
// Warnings are octagons
21 "STOP: Critical warning" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
22
23 // Entry/exit are double circles
24 "Process starts" [shape=doublecircle];
25 "Process complete" [shape=doublecircle];
26
27 // Examples of each
28 "Is test passing?" [shape=diamond];
29 "Write test first" [shape=box];
30 "npm test" [shape=plaintext];
31 "I am stuck" [shape=ellipse];
32 "NEVER use git add -A" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
33 }
34
35 // Edge naming conventions
36 subgraph cluster_edge_types {
37 label="EDGE LABELS";
38
39 "Binary decision?" [shape=diamond];
40 "Yes path" [shape=box];
41 "No path" [shape=box];
42
43 "Binary decision?" -> "Yes path" [label="yes"];
44 "Binary decision?" -> "No path" [label="no"];
45
46 "Multiple choice?" [shape=diamond];
47 "Option A" [shape=box];
48 "Option B" [shape=box];
49 "Option C" [shape=box];
50
51 "Multiple choice?" -> "Option A" [label="condition A"];
52 "Multiple choice?" -> "Option B" [label="condition B"];
53 "Multiple choice?" -> "Option C" [label="otherwise"];
54
55 "Process A done" [shape=doublecircle];
56 "Process B starts" [shape=doublecircle];
57
58 "Process A done" -> "Process B starts" [label="triggers", style=dotted];
59 }
60
61 // Naming patterns
62 subgraph cluster_naming_patterns {
63 label="NAMING PATTERNS";
64
65 // Questions end with ?
66 "Should I do X?";
67 "Can this be Y?";
68 "Is Z true?";
69 "Have I done W?";
70
71 // Actions start with verb
72 "Write the test";
73 "Search for patterns";
74 "Commit changes";
75 "Ask for help";
76
77 // Commands are literal
78 "grep -r 'pattern' .";
79 "git status";
80 "npm run build";
81
82 // States describe situation
83 "Test is failing";
84 "Build complete";
85 "Stuck on error";
86 }
87
88 // Process structure template
89 subgraph cluster_structure {
90 label="PROCESS STRUCTURE TEMPLATE";
91
92 "Trigger: Something happens" [shape=ellipse];
93 "Initial check?" [shape=diamond];
94 "Main action" [shape=box];
95 "git status" [shape=plaintext];
96 "Another check?" [shape=diamond];
97 "Alternative action" [shape=box];
98 "STOP: Don't do this" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
99 "Process complete" [shape=doublecircle];
100
101 "Trigger: Something happens" -> "Initial check?";
102 "Initial check?" -> "Main action" [label="yes"];
103 "Initial check?" -> "Alternative action" [label="no"];
104 "Main action" -> "git status";
105 "git status" -> "Another check?";
106 "Another check?" -> "Process complete" [label="ok"];
107 "Another check?" -> "STOP: Don't do this" [label="problem"];
108 "Alternative action" -> "Process complete";
109 }
110
111 // When to use which shape
112 subgraph cluster_shape_rules {
113 label="WHEN TO USE EACH SHAPE";
114
115 "Choosing a shape" [shape=ellipse];
116
117 "Is it a decision?" [shape=diamond];
118 "Use diamond" [shape=diamond, style=filled, fillcolor=lightblue];
119
120 "Is it a command?" [shape=diamond];
121 "Use plaintext" [shape=plaintext, style=filled, fillcolor=lightgray];
122
123 "Is it a warning?" [shape=diamond];
124 "Use octagon" [shape=octagon, style=filled, fillcolor=pink];
125
126 "Is it entry/exit?" [shape=diamond];
127 "Use doublecircle" [shape=doublecircle, style=filled, fillcolor=lightgreen];
128
129 "Is it a state?" [shape=diamond];
130 "Use ellipse" [shape=ellipse, style=filled, fillcolor=lightyellow];
131
132 "Default: use box" [shape=box, style=filled, fillcolor=lightcyan];
133
134 "Choosing a shape" -> "Is it a decision?";
135 "Is it a decision?" -> "Use diamond" [label="yes"];
136 "Is it a decision?" -> "Is it a command?" [label="no"];
137 "Is it a command?" -> "Use plaintext" [label="yes"];
138 "Is it a command?" -> "Is it a warning?" [label="no"];
139 "Is it a warning?" -> "Use octagon" [label="yes"];
140 "Is it a warning?" -> "Is it entry/exit?" [label="no"];
141 "Is it entry/exit?" -> "Use doublecircle" [label="yes"];
142 "Is it entry/exit?" -> "Is it a state?" [label="no"];
143 "Is it a state?" -> "Use ellipse" [label="yes"];
144 "Is it a state?" -> "Default: use box" [label="no"];
145 }
146
147 // Good vs bad examples
148 subgraph cluster_examples {
149 label="GOOD VS BAD EXAMPLES";
150
151 // Good: specific and shaped correctly
152 "Test failed" [shape=ellipse];
153 "Read error message" [shape=box];
154 "Can reproduce?" [shape=diamond];
155 "git diff HEAD~1" [shape=plaintext];
156 "NEVER ignore errors" [shape=octagon, style=filled, fillcolor=red, fontcolor=white];
157
158 "Test failed" -> "Read error message";
159 "Read error message" -> "Can reproduce?";
160 "Can reproduce?" -> "git diff HEAD~1" [label="yes"];
161
162 // Bad: vague and wrong shapes
163 bad_1 [label="Something wrong", shape=box]; // Should be ellipse (state)
164 bad_2 [label="Fix it", shape=box]; // Too vague
165 bad_3 [label="Check", shape=box]; // Should be diamond
166 bad_4 [label="Run command", shape=box]; // Should be plaintext with actual command
167
168 bad_1 -> bad_2;
169 bad_2 -> bad_3;
170 bad_3 -> bad_4;
171 }
172 }