diff --git a/assets/cli-railroad/diagram/Alphanumeric.svg b/assets/cli-railroad/diagram/Alphanumeric.svg
new file mode 100644
index 0000000..0f629e8
--- /dev/null
+++ b/assets/cli-railroad/diagram/Alphanumeric.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="161" height="125">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <polygon points="51 19 58 3 106 3 113 19 106 35 58 35"/>
+   <polygon points="49 17 56 1 104 1 111 17 104 33 56 33" class="regexp"/>
+   <text class="regexp" x="64" y="21">[0-9]</text>
+   <polygon points="51 63 58 47 104 47 111 63 104 79 58 79"/>
+   <polygon points="49 61 56 45 102 45 109 61 102 77 56 77" class="regexp"/>
+   <text class="regexp" x="64" y="65">[a-z]</text>
+   <polygon points="51 107 58 91 106 91 113 107 106 123 58 123"/>
+   <polygon points="49 105 56 89 104 89 111 105 104 121 56 121" class="regexp"/>
+   <text class="regexp" x="64" y="109">[A-Z]</text>
+   <path class="line"
+          d="m17 17 h2 m20 0 h10 m62 0 h10 m-102 0 h20 m82 0 h20 m-122 0 q10 0 10 10 m102 0 q0 -10 10 -10 m-112 10 v24 m102 0 v-24 m-102 24 q0 10 10 10 m82 0 q10 0 10 -10 m-92 10 h10 m60 0 h10 m0 0 h2 m-92 -10 v20 m102 0 v-20 m-102 20 v24 m102 0 v-24 m-102 24 q0 10 10 10 m82 0 q10 0 10 -10 m-92 10 h10 m62 0 h10 m23 -88 h-3"/>
+   <polygon points="151 17 159 13 159 21"/>
+   <polygon points="151 17 143 13 143 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/AlphanumericAnd.svg b/assets/cli-railroad/diagram/AlphanumericAnd.svg
new file mode 100644
index 0000000..d3991eb
--- /dev/null
+++ b/assets/cli-railroad/diagram/AlphanumericAnd.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="161" height="213">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <polygon points="51 19 58 3 106 3 113 19 106 35 58 35"/>
+   <polygon points="49 17 56 1 104 1 111 17 104 33 56 33" class="regexp"/>
+   <text class="regexp" x="64" y="21">[0-9]</text>
+   <polygon points="51 63 58 47 104 47 111 63 104 79 58 79"/>
+   <polygon points="49 61 56 45 102 45 109 61 102 77 56 77" class="regexp"/>
+   <text class="regexp" x="64" y="65">[a-z]</text>
+   <polygon points="51 107 58 91 106 91 113 107 106 123 58 123"/>
+   <polygon points="49 105 56 89 104 89 111 105 104 121 56 121" class="regexp"/>
+   <text class="regexp" x="64" y="109">[A-Z]</text>
+   <rect x="51" y="135" width="26" height="32" rx="10"/>
+   <rect x="49"
+          y="133"
+          width="26"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="59" y="153">-</text>
+   <rect x="51" y="179" width="28" height="32" rx="10"/>
+   <rect x="49"
+          y="177"
+          width="28"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="59" y="197">_</text>
+   <path class="line"
+          d="m17 17 h2 m20 0 h10 m62 0 h10 m-102 0 h20 m82 0 h20 m-122 0 q10 0 10 10 m102 0 q0 -10 10 -10 m-112 10 v24 m102 0 v-24 m-102 24 q0 10 10 10 m82 0 q10 0 10 -10 m-92 10 h10 m60 0 h10 m0 0 h2 m-92 -10 v20 m102 0 v-20 m-102 20 v24 m102 0 v-24 m-102 24 q0 10 10 10 m82 0 q10 0 10 -10 m-92 10 h10 m62 0 h10 m-92 -10 v20 m102 0 v-20 m-102 20 v24 m102 0 v-24 m-102 24 q0 10 10 10 m82 0 q10 0 10 -10 m-92 10 h10 m26 0 h10 m0 0 h36 m-92 -10 v20 m102 0 v-20 m-102 20 v24 m102 0 v-24 m-102 24 q0 10 10 10 m82 0 q10 0 10 -10 m-92 10 h10 m28 0 h10 m0 0 h34 m23 -176 h-3"/>
+   <polygon points="151 17 159 13 159 21"/>
+   <polygon points="151 17 143 13 143 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/Char.svg b/assets/cli-railroad/diagram/Char.svg
new file mode 100644
index 0000000..3302916
--- /dev/null
+++ b/assets/cli-railroad/diagram/Char.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="301" height="81">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#UnicodeExceptDoubleQuotes"
+       xlink:title="UnicodeExceptDoubleQuotes">
+      <rect x="51" y="3" width="202" height="32"/>
+      <rect x="49" y="1" width="202" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="21">UnicodeExceptDoubleQuotes</text>
+   </a>
+   <rect x="51" y="47" width="34" height="32" rx="10"/>
+   <rect x="49"
+          y="45"
+          width="34"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="59" y="65">\"</text>
+   <path class="line"
+          d="m17 17 h2 m20 0 h10 m202 0 h10 m-242 0 h20 m222 0 h20 m-262 0 q10 0 10 10 m242 0 q0 -10 10 -10 m-252 10 v24 m242 0 v-24 m-242 24 q0 10 10 10 m222 0 q10 0 10 -10 m-232 10 h10 m34 0 h10 m0 0 h168 m23 -44 h-3"/>
+   <polygon points="291 17 299 13 299 21"/>
+   <polygon points="291 17 283 13 283 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/CmdIdentifier.svg b/assets/cli-railroad/diagram/CmdIdentifier.svg
new file mode 100644
index 0000000..e75517d
--- /dev/null
+++ b/assets/cli-railroad/diagram/CmdIdentifier.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="229" height="57">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 51 1 47 1 55"/>
+   <polygon points="17 51 9 47 9 55"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#AlphanumericAnd"
+       xlink:title="AlphanumericAnd">
+      <rect x="51" y="3" width="130" height="32"/>
+      <rect x="49" y="1" width="130" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="21">AlphanumericAnd</text>
+   </a>
+   <path class="line"
+          d="m17 51 h2 m20 0 h10 m0 0 h140 m-170 0 l20 0 m-1 0 q-9 0 -9 -10 l0 -14 q0 -10 10 -10 m150 34 l20 0 m-20 0 q10 0 10 -10 l0 -14 q0 -10 -10 -10 m-150 0 h10 m130 0 h10 m23 34 h-3"/>
+   <polygon points="219 51 227 47 227 55"/>
+   <polygon points="219 51 211 47 211 55"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/Command.svg b/assets/cli-railroad/diagram/Command.svg
new file mode 100644
index 0000000..666aca3
--- /dev/null
+++ b/assets/cli-railroad/diagram/Command.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="471" height="153">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 51 1 47 1 55"/>
+   <polygon points="17 51 9 47 9 55"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#CmdIdentifier"
+       xlink:title="CmdIdentifier">
+      <rect x="31" y="37" width="106" height="32"/>
+      <rect x="29" y="35" width="106" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="39" y="55">CmdIdentifier</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Option"
+       xlink:title="Option">
+      <rect x="177" y="3" width="62" height="32"/>
+      <rect x="175" y="1" width="62" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="185" y="21">Option</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Operand"
+       xlink:title="Operand">
+      <rect x="319" y="37" width="74" height="32"/>
+      <rect x="317" y="35" width="74" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="327" y="55">Operand</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Command"
+       xlink:title="Command">
+      <rect x="319" y="103" width="84" height="32"/>
+      <rect x="317" y="101" width="84" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="327" y="121">Command</text>
+   </a>
+   <path class="line"
+          d="m17 51 h2 m0 0 h10 m106 0 h10 m20 0 h10 m0 0 h72 m-102 0 l20 0 m-1 0 q-9 0 -9 -10 l0 -14 q0 -10 10 -10 m82 34 l20 0 m-20 0 q10 0 10 -10 l0 -14 q0 -10 -10 -10 m-82 0 h10 m62 0 h10 m60 34 h10 m74 0 h10 m-114 0 l20 0 m-1 0 q-9 0 -9 -10 l0 -12 q0 -10 10 -10 m94 32 l20 0 m-20 0 q10 0 10 -10 l0 -12 q0 -10 -10 -10 m-94 0 h10 m0 0 h84 m20 32 h10 m-164 0 h20 m144 0 h20 m-184 0 q10 0 10 10 m164 0 q0 -10 10 -10 m-174 10 v46 m164 0 v-46 m-164 46 q0 10 10 10 m144 0 q10 0 10 -10 m-134 10 h10 m84 0 h10 m-124 0 l20 0 m-1 0 q-9 0 -9 -10 l0 -12 q0 -10 10 -10 m104 32 l20 0 m-20 0 q10 0 10 -10 l0 -12 q0 -10 -10 -10 m-104 0 h10 m0 0 h94 m-134 22 v20 m164 0 v-20 m-164 20 v14 m164 0 v-14 m-164 14 q0 10 10 10 m144 0 q10 0 10 -10 m-154 10 h10 m0 0 h134 m23 -100 h-3"/>
+   <polygon points="461 51 469 47 469 55"/>
+   <polygon points="461 51 453 47 453 55"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/LongFlagOption.svg b/assets/cli-railroad/diagram/LongFlagOption.svg
new file mode 100644
index 0000000..75b5282
--- /dev/null
+++ b/assets/cli-railroad/diagram/LongFlagOption.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="407" height="71">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 51 1 47 1 55"/>
+   <polygon points="17 51 9 47 9 55"/>
+   <rect x="31" y="37" width="32" height="32" rx="10"/>
+   <rect x="29"
+          y="35"
+          width="32"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="39" y="55">--</text>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Alphanumeric"
+       xlink:title="Alphanumeric">
+      <rect x="83" y="37" width="106" height="32"/>
+      <rect x="81" y="35" width="106" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="91" y="55">Alphanumeric</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#AlphanumericAnd"
+       xlink:title="AlphanumericAnd">
+      <rect x="229" y="3" width="130" height="32"/>
+      <rect x="227" y="1" width="130" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="237" y="21">AlphanumericAnd</text>
+   </a>
+   <path class="line"
+          d="m17 51 h2 m0 0 h10 m32 0 h10 m0 0 h10 m106 0 h10 m20 0 h10 m0 0 h140 m-170 0 l20 0 m-1 0 q-9 0 -9 -10 l0 -14 q0 -10 10 -10 m150 34 l20 0 m-20 0 q10 0 10 -10 l0 -14 q0 -10 -10 -10 m-150 0 h10 m130 0 h10 m23 34 h-3"/>
+   <polygon points="397 51 405 47 405 55"/>
+   <polygon points="397 51 389 47 389 55"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/LongOption.svg b/assets/cli-railroad/diagram/LongOption.svg
new file mode 100644
index 0000000..8ffc45c
--- /dev/null
+++ b/assets/cli-railroad/diagram/LongOption.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="227" height="81">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#LongFlagOption"
+       xlink:title="LongFlagOption">
+      <rect x="51" y="3" width="118" height="32"/>
+      <rect x="49" y="1" width="118" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="21">LongFlagOption</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#LongValueOption"
+       xlink:title="LongValueOption">
+      <rect x="51" y="47" width="128" height="32"/>
+      <rect x="49" y="45" width="128" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="65">LongValueOption</text>
+   </a>
+   <path class="line"
+          d="m17 17 h2 m20 0 h10 m118 0 h10 m0 0 h10 m-168 0 h20 m148 0 h20 m-188 0 q10 0 10 10 m168 0 q0 -10 10 -10 m-178 10 v24 m168 0 v-24 m-168 24 q0 10 10 10 m148 0 q10 0 10 -10 m-158 10 h10 m128 0 h10 m23 -44 h-3"/>
+   <polygon points="217 17 225 13 225 21"/>
+   <polygon points="217 17 209 13 209 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/LongValueOption.svg b/assets/cli-railroad/diagram/LongValueOption.svg
new file mode 100644
index 0000000..df85023
--- /dev/null
+++ b/assets/cli-railroad/diagram/LongValueOption.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="657" height="71">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 51 1 47 1 55"/>
+   <polygon points="17 51 9 47 9 55"/>
+   <rect x="31" y="37" width="32" height="32" rx="10"/>
+   <rect x="29"
+          y="35"
+          width="32"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="39" y="55">--</text>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Alphanumeric"
+       xlink:title="Alphanumeric">
+      <rect x="83" y="37" width="106" height="32"/>
+      <rect x="81" y="35" width="106" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="91" y="55">Alphanumeric</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#AlphanumericAnd"
+       xlink:title="AlphanumericAnd">
+      <rect x="229" y="3" width="130" height="32"/>
+      <rect x="227" y="1" width="130" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="237" y="21">AlphanumericAnd</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#OptionValueDelimiter"
+       xlink:title="OptionValueDelimiter">
+      <rect x="399" y="37" width="154" height="32"/>
+      <rect x="397" y="35" width="154" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="407" y="55">OptionValueDelimiter</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Value"
+       xlink:title="Value">
+      <rect x="573" y="37" width="56" height="32"/>
+      <rect x="571" y="35" width="56" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="581" y="55">Value</text>
+   </a>
+   <path class="line"
+          d="m17 51 h2 m0 0 h10 m32 0 h10 m0 0 h10 m106 0 h10 m20 0 h10 m0 0 h140 m-170 0 l20 0 m-1 0 q-9 0 -9 -10 l0 -14 q0 -10 10 -10 m150 34 l20 0 m-20 0 q10 0 10 -10 l0 -14 q0 -10 -10 -10 m-150 0 h10 m130 0 h10 m20 34 h10 m154 0 h10 m0 0 h10 m56 0 h10 m3 0 h-3"/>
+   <polygon points="647 51 655 47 655 55"/>
+   <polygon points="647 51 639 47 639 55"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/Operand.svg b/assets/cli-railroad/diagram/Operand.svg
new file mode 100644
index 0000000..cb8c835
--- /dev/null
+++ b/assets/cli-railroad/diagram/Operand.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="115" height="37">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Value"
+       xlink:title="Value">
+      <rect x="31" y="3" width="56" height="32"/>
+      <rect x="29" y="1" width="56" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="39" y="21">Value</text>
+   </a>
+   <path class="line" d="m17 17 h2 m0 0 h10 m56 0 h10 m3 0 h-3"/>
+   <polygon points="105 17 113 13 113 21"/>
+   <polygon points="105 17 97 13 97 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/Option.svg b/assets/cli-railroad/diagram/Option.svg
new file mode 100644
index 0000000..a826d03
--- /dev/null
+++ b/assets/cli-railroad/diagram/Option.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="195" height="81">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#ShortOption"
+       xlink:title="ShortOption">
+      <rect x="51" y="3" width="96" height="32"/>
+      <rect x="49" y="1" width="96" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="21">ShortOption</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#LongOption"
+       xlink:title="LongOption">
+      <rect x="51" y="47" width="92" height="32"/>
+      <rect x="49" y="45" width="92" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="65">LongOption</text>
+   </a>
+   <path class="line"
+          d="m17 17 h2 m20 0 h10 m96 0 h10 m-136 0 h20 m116 0 h20 m-156 0 q10 0 10 10 m136 0 q0 -10 10 -10 m-146 10 v24 m136 0 v-24 m-136 24 q0 10 10 10 m116 0 q10 0 10 -10 m-126 10 h10 m92 0 h10 m0 0 h4 m23 -44 h-3"/>
+   <polygon points="185 17 193 13 193 21"/>
+   <polygon points="185 17 177 13 177 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/OptionValueDelimiter.svg b/assets/cli-railroad/diagram/OptionValueDelimiter.svg
new file mode 100644
index 0000000..2597f51
--- /dev/null
+++ b/assets/cli-railroad/diagram/OptionValueDelimiter.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="157" height="81">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Space"
+       xlink:title="Space">
+      <rect x="51" y="3" width="58" height="32"/>
+      <rect x="49" y="1" width="58" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="21">Space</text>
+   </a>
+   <rect x="51" y="47" width="30" height="32" rx="10"/>
+   <rect x="49"
+          y="45"
+          width="30"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="59" y="65">=</text>
+   <path class="line"
+          d="m17 17 h2 m20 0 h10 m58 0 h10 m-98 0 h20 m78 0 h20 m-118 0 q10 0 10 10 m98 0 q0 -10 10 -10 m-108 10 v24 m98 0 v-24 m-98 24 q0 10 10 10 m78 0 q10 0 10 -10 m-88 10 h10 m30 0 h10 m0 0 h28 m23 -44 h-3"/>
+   <polygon points="147 17 155 13 155 21"/>
+   <polygon points="147 17 139 13 139 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/ShortFlagOption.svg b/assets/cli-railroad/diagram/ShortFlagOption.svg
new file mode 100644
index 0000000..300cccd
--- /dev/null
+++ b/assets/cli-railroad/diagram/ShortFlagOption.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="211" height="37">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <rect x="31" y="3" width="26" height="32" rx="10"/>
+   <rect x="29"
+          y="1"
+          width="26"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="39" y="21">-</text>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Alphanumeric"
+       xlink:title="Alphanumeric">
+      <rect x="77" y="3" width="106" height="32"/>
+      <rect x="75" y="1" width="106" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="85" y="21">Alphanumeric</text>
+   </a>
+   <path class="line"
+          d="m17 17 h2 m0 0 h10 m26 0 h10 m0 0 h10 m106 0 h10 m3 0 h-3"/>
+   <polygon points="201 17 209 13 209 21"/>
+   <polygon points="201 17 193 13 193 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/ShortOption.svg b/assets/cli-railroad/diagram/ShortOption.svg
new file mode 100644
index 0000000..3a997f6
--- /dev/null
+++ b/assets/cli-railroad/diagram/ShortOption.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="229" height="81">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#ShortFlagOption"
+       xlink:title="ShortFlagOption">
+      <rect x="51" y="3" width="122" height="32"/>
+      <rect x="49" y="1" width="122" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="21">ShortFlagOption</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#ShortValueOption"
+       xlink:title="ShortValueOption">
+      <rect x="51" y="47" width="130" height="32"/>
+      <rect x="49" y="45" width="130" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="59" y="65">ShortValueOption</text>
+   </a>
+   <path class="line"
+          d="m17 17 h2 m20 0 h10 m122 0 h10 m0 0 h8 m-170 0 h20 m150 0 h20 m-190 0 q10 0 10 10 m170 0 q0 -10 10 -10 m-180 10 v24 m170 0 v-24 m-170 24 q0 10 10 10 m150 0 q10 0 10 -10 m-160 10 h10 m130 0 h10 m23 -44 h-3"/>
+   <polygon points="219 17 227 13 227 21"/>
+   <polygon points="219 17 211 13 211 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/ShortValueOption.svg b/assets/cli-railroad/diagram/ShortValueOption.svg
new file mode 100644
index 0000000..dbe1f24
--- /dev/null
+++ b/assets/cli-railroad/diagram/ShortValueOption.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="461" height="37">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 17 1 13 1 21"/>
+   <polygon points="17 17 9 13 9 21"/>
+   <rect x="31" y="3" width="26" height="32" rx="10"/>
+   <rect x="29"
+          y="1"
+          width="26"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="39" y="21">-</text>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Alphanumeric"
+       xlink:title="Alphanumeric">
+      <rect x="77" y="3" width="106" height="32"/>
+      <rect x="75" y="1" width="106" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="85" y="21">Alphanumeric</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#OptionValueDelimiter"
+       xlink:title="OptionValueDelimiter">
+      <rect x="203" y="3" width="154" height="32"/>
+      <rect x="201" y="1" width="154" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="211" y="21">OptionValueDelimiter</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Value"
+       xlink:title="Value">
+      <rect x="377" y="3" width="56" height="32"/>
+      <rect x="375" y="1" width="56" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="385" y="21">Value</text>
+   </a>
+   <path class="line"
+          d="m17 17 h2 m0 0 h10 m26 0 h10 m0 0 h10 m106 0 h10 m0 0 h10 m154 0 h10 m0 0 h10 m56 0 h10 m3 0 h-3"/>
+   <polygon points="451 17 459 13 459 21"/>
+   <polygon points="451 17 443 13 443 21"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/Space.svg b/assets/cli-railroad/diagram/Space.svg
new file mode 100644
index 0000000..ce1a49f
--- /dev/null
+++ b/assets/cli-railroad/diagram/Space.svg
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="175" height="57">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 51 1 47 1 55"/>
+   <polygon points="17 51 9 47 9 55"/>
+   <rect x="51" y="3" width="76" height="32" rx="10"/>
+   <rect x="49"
+          y="1"
+          width="76"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="59" y="21">U+0020</text>
+   <path class="line"
+          d="m17 51 h2 m20 0 h10 m0 0 h86 m-116 0 l20 0 m-1 0 q-9 0 -9 -10 l0 -14 q0 -10 10 -10 m96 34 l20 0 m-20 0 q10 0 10 -10 l0 -14 q0 -10 -10 -10 m-96 0 h10 m76 0 h10 m23 34 h-3"/>
+   <polygon points="165 51 173 47 173 55"/>
+   <polygon points="165 51 157 47 157 55"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/Value.svg b/assets/cli-railroad/diagram/Value.svg
new file mode 100644
index 0000000..d1475ba
--- /dev/null
+++ b/assets/cli-railroad/diagram/Value.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="369" height="179">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <polygon points="9 51 1 47 1 55"/>
+   <polygon points="17 51 9 47 9 55"/>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Char"
+       xlink:title="Char">
+      <rect x="71" y="3" width="50" height="32"/>
+      <rect x="69" y="1" width="50" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="79" y="21">Char</text>
+   </a>
+   <rect x="51" y="85" width="26" height="32" rx="10"/>
+   <rect x="49"
+          y="83"
+          width="26"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="59" y="103">"</text>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Char"
+       xlink:title="Char">
+      <rect x="157" y="85" width="50" height="32"/>
+      <rect x="155" y="83" width="50" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="165" y="103">Char</text>
+   </a>
+   <a xmlns:xlink="http://www.w3.org/1999/xlink"
+       xlink:href="#Space"
+       xlink:title="Space">
+      <rect x="157" y="129" width="58" height="32"/>
+      <rect x="155" y="127" width="58" height="32" class="nonterminal"/>
+      <text class="nonterminal" x="165" y="147">Space</text>
+   </a>
+   <rect x="295" y="85" width="26" height="32" rx="10"/>
+   <rect x="293"
+          y="83"
+          width="26"
+          height="32"
+          class="terminal"
+          rx="10"/>
+   <text class="terminal" x="303" y="103">"</text>
+   <path class="line"
+          d="m17 51 h2 m40 0 h10 m0 0 h60 m-90 0 l20 0 m-1 0 q-9 0 -9 -10 l0 -14 q0 -10 10 -10 m70 34 l20 0 m-20 0 q10 0 10 -10 l0 -14 q0 -10 -10 -10 m-70 0 h10 m50 0 h10 m20 34 h180 m-310 0 h20 m290 0 h20 m-330 0 q10 0 10 10 m310 0 q0 -10 10 -10 m-320 10 v28 m310 0 v-28 m-310 28 q0 10 10 10 m290 0 q10 0 10 -10 m-300 10 h10 m26 0 h10 m60 0 h10 m50 0 h10 m0 0 h8 m-98 0 h20 m78 0 h20 m-118 0 q10 0 10 10 m98 0 q0 -10 10 -10 m-108 10 v24 m98 0 v-24 m-98 24 q0 10 10 10 m78 0 q10 0 10 -10 m-88 10 h10 m58 0 h10 m-118 -44 l20 0 m-1 0 q-9 0 -9 -10 l0 -12 q0 -10 10 -10 m118 32 l20 0 m-20 0 q10 0 10 -10 l0 -12 q0 -10 -10 -10 m-118 0 h10 m0 0 h108 m-158 32 h20 m158 0 h20 m-198 0 q10 0 10 10 m178 0 q0 -10 10 -10 m-188 10 v58 m178 0 v-58 m-178 58 q0 10 10 10 m158 0 q10 0 10 -10 m-168 10 h10 m0 0 h148 m20 -78 h10 m26 0 h10 m23 -48 h-3"/>
+   <polygon points="359 51 367 47 367 55"/>
+   <polygon points="359 51 351 47 351 55"/>
+</svg>
diff --git a/assets/cli-railroad/diagram/rr-2.0.svg b/assets/cli-railroad/diagram/rr-2.0.svg
new file mode 100644
index 0000000..1de2f82
--- /dev/null
+++ b/assets/cli-railroad/diagram/rr-2.0.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+   <defs>
+      <style type="text/css">
+    @namespace "http://www.w3.org/2000/svg";
+    .line                 {fill: none; stroke: #332900; stroke-width: 1;}
+    .bold-line            {stroke: #141000; shape-rendering: crispEdges; stroke-width: 2;}
+    .thin-line            {stroke: #1F1800; shape-rendering: crispEdges}
+    .filled               {fill: #332900; stroke: none;}
+    text.terminal         {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #141000;
+                            font-weight: bold;
+                          }
+    text.nonterminal      {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1A1400;
+                            font-weight: normal;
+                          }
+    text.regexp           {font-family: Verdana, Sans-serif;
+                            font-size: 12px;
+                            fill: #1F1800;
+                            font-weight: normal;
+                          }
+    rect, circle, polygon {fill: #332900; stroke: #332900;}
+    rect.terminal         {fill: #FFDB4D; stroke: #332900; stroke-width: 1;}
+    rect.nonterminal      {fill: #FFEC9E; stroke: #332900; stroke-width: 1;}
+    rect.text             {fill: none; stroke: none;}
+    polygon.regexp        {fill: #FFF4C7; stroke: #332900; stroke-width: 1;}
+  </style>
+   </defs>
+   <g transform="scale(0.178)">
+      <circle cx="45" cy="45" r="45" style="stroke:none; fill:#FFCC00"/>
+      <circle cx="45"
+               cy="45"
+               r="42"
+               style="stroke:#332900; stroke-width:2px; fill:#FFCC00"/>
+      <line x1="15"
+             y1="15"
+             x2="75"
+             y2="75"
+             stroke="#332900"
+             style="stroke-width:9px;"/>
+      <line x1="15"
+             y1="75"
+             x2="75"
+             y2="15"
+             stroke="#332900"
+             style="stroke-width:9px;"/>
+      <text x="7"
+             y="54"
+             style="font-size:26px; font-family:Arial, Sans-serif; font-weight:bold; fill: #332900">R</text>
+      <text x="64"
+             y="54"
+             style="font-size:26px; font-family:Arial, Sans-serif; font-weight:bold; fill: #332900">R</text>
+   </g>
+</svg>
diff --git a/assets/cli-railroad/index.md b/assets/cli-railroad/index.md
new file mode 100644
index 0000000..4df89c7
--- /dev/null
+++ b/assets/cli-railroad/index.md
@@ -0,0 +1,222 @@
+**Command:**
+
+![Command](diagram/Command.svg)
+
+```
+Command  ::= CmdIdentifier Option* ( Operand* | Command+ )
+```
+
+referenced by:
+
+- Command
+
+**CmdIdentifier:**
+
+![CmdIdentifier](diagram/CmdIdentifier.svg)
+
+```
+CmdIdentifier
+         ::= AlphanumericAnd*
+```
+
+referenced by:
+
+- Command
+
+**Option:**
+
+![Option](diagram/Option.svg)
+
+```
+Option   ::= ShortOption
+           | LongOption
+```
+
+referenced by:
+
+- Command
+
+**ShortOption:**
+
+![ShortOption](diagram/ShortOption.svg)
+
+```
+ShortOption
+         ::= ShortFlagOption
+           | ShortValueOption
+```
+
+referenced by:
+
+- Option
+
+**LongOption:**
+
+![LongOption](diagram/LongOption.svg)
+
+```
+LongOption
+         ::= LongFlagOption
+           | LongValueOption
+```
+
+referenced by:
+
+- Option
+
+**ShortFlagOption:**
+
+![ShortFlagOption](diagram/ShortFlagOption.svg)
+
+```
+ShortFlagOption
+         ::= '-' Alphanumeric
+```
+
+referenced by:
+
+- ShortOption
+
+**ShortValueOption:**
+
+![ShortValueOption](diagram/ShortValueOption.svg)
+
+```
+ShortValueOption
+         ::= '-' Alphanumeric OptionValueDelimiter Value
+```
+
+referenced by:
+
+- ShortOption
+
+**LongFlagOption:**
+
+![LongFlagOption](diagram/LongFlagOption.svg)
+
+```
+LongFlagOption
+         ::= '--' Alphanumeric AlphanumericAnd*
+```
+
+referenced by:
+
+- LongOption
+
+**LongValueOption:**
+
+![LongValueOption](diagram/LongValueOption.svg)
+
+```
+LongValueOption
+         ::= '--' Alphanumeric AlphanumericAnd* OptionValueDelimiter Value
+```
+
+referenced by:
+
+- LongOption
+
+**OptionValueDelimiter:**
+
+![OptionValueDelimiter](diagram/OptionValueDelimiter.svg)
+
+```
+OptionValueDelimiter
+         ::= Space
+           | '='
+```
+
+referenced by:
+
+- LongValueOption
+- ShortValueOption
+
+**Alphanumeric:**
+
+![Alphanumeric](diagram/Alphanumeric.svg)
+
+```
+Alphanumeric
+         ::= [0-9a-zA-Z]
+```
+
+referenced by:
+
+- LongFlagOption
+- LongValueOption
+- ShortFlagOption
+- ShortValueOption
+
+**AlphanumericAnd:**
+
+![AlphanumericAnd](diagram/AlphanumericAnd.svg)
+
+```
+AlphanumericAnd
+         ::= [0-9a-zA-Z_#x2D]
+```
+
+referenced by:
+
+- CmdIdentifier
+- LongFlagOption
+- LongValueOption
+
+**Value:**
+
+![Value](diagram/Value.svg)
+
+```
+Value    ::= Char*
+           | '"' ( Char | Space )* '"'
+```
+
+referenced by:
+
+- LongValueOption
+- Operand
+- ShortValueOption
+
+**Char:**
+
+![Char](diagram/Char.svg)
+
+```
+Char     ::= UnicodeExceptDoubleQuotes
+           | '\"'
+```
+
+referenced by:
+
+- Value
+
+**Space:**
+
+![Space](diagram/Space.svg)
+
+```
+Space    ::= ( U+0020 )*
+```
+
+referenced by:
+
+- OptionValueDelimiter
+- Value
+
+**Operand:**
+
+![Operand](diagram/Operand.svg)
+
+```
+Operand  ::= Value
+```
+
+referenced by:
+
+- Command
+
+##
+
+![rr-2.0](diagram/rr-2.0.svg) <sup>generated by [RR - Railroad Diagram Generator][rr]</sup>
+
+[rr]: http://bottlecaps.de/rr/ui
diff --git a/cli-args.md b/cli-args.md
new file mode 100644
index 0000000..6062166
--- /dev/null
+++ b/cli-args.md
@@ -0,0 +1,93 @@
+# Command-line argument conventions
+
+```
+Code: conv/cli-args
+Version: 1.0.0
+Author: Muthu Kumar <muthukumar@thefeathers.in>
+Org: Feathers Studio
+```
+
+## Introduction
+
+The POSIX standard is often cited when designing command line interfaces. However, the most recent version published as IEEE Std 1003.1-2017 (also published as [The Open Group Base Specifications](https://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap12.html)) still falls woefully short of modern requirements. The [GNU extensions](https://www.gnu.org/software/libc/manual/html_node/Argument-Syntax.html) to POSIX are the most widely used. However, there is still room for disambiguation. This specification addresses them.
+
+## Specification
+
+A command MAY accept sub-commands, options, and operands.
+
+##### Note: This specification is available as a [formal grammar](#formal-grammar), or as a [railroad diagram](./assets/cli-railroad/index.md).
+
+### Sub-commands
+
+-   A sub-command is a part of the command that acts as a command by itself. In other words, a sub-command is a recursive command.
+-   Commands (or sub-commands) with sub-commands MUST NOT accept operands. They MAY accept options.
+-   Any arguments after a sub-command MUST be accepted literally without parsing, even if they start with `-`, `--`, or `=`. They MUST be parsed by the sub-command's own arg parser, following this specification.
+
+### Options
+
+-   Options are arguments that MAY modify the behaviour of the command.
+-   Options MAY be supplied in any order.
+
+#### Boolean options
+
+-   Boolean options MUST NOT accept any value. They are boolean in nature and their presence MUST be inferred as true.
+-   Boolean options MAY be referred to as "flags".
+
+#### Non-boolean options
+
+-   A non-boolean option MUST accept a single value. An option MAY be repeated several times to pass multiple values.
+-   A non-boolean option MUST be separated from their value by a space or "=".
+
+#### Long-form options
+
+-   Every option MUST have a long-form. This is denoted by the delimiter `--` followed by the option name without spaces.
+-   Long-form options MUST be at least two characters, and consist of alphanumeric characters, `-`, or `_`.
+-   Long-form options MUST begin with an alphanumeric character.
+
+#### Short-form options
+
+-   Options MAY have a short-form. This is denoted by the delimiter `-` and MUST be followed by a single alphanumeric character.
+-   Every short-form option MUST correspond to a long-form option. The inverse is not required.
+
+### Operands
+
+-   Operands are any values passed as input to the utility for its primary function.
+-   Operands MUST be passed after all options.
+
+### Strict-mode
+
+-   "Strict-mode" MAY be specified by the application developer via the parser library or their own implementation of this specification.
+-   "Strict-mode" MAY be specified by the application user via the environment variable `ARG_PARSER_STRICT_MODE`.
+-   In "strict-mode", non-boolean options MUST be separated from their value by "=" only.
+
+### Special-cases
+
+-   Any arguments after the delimiter `--` followed by space MUST be accepted literally without parsing, even if they start with `-`, `--`, or `=`.
+-   A single `-` MUST be interpreted as a regular operand. By convention, this MAY represent input from or output to the standard input/output streams.
+
+## Formal Grammar
+
+```C
+Command ::= CmdIdentifier
+Command ::= CmdIdentifier Operand*
+Command ::= CmdIdentifier Option* Operand*
+Command ::= CmdIdentifier Command*
+Command ::= CmdIdentifier Option* Command*
+CmdIdentifier ::= AlphanumericAnd*
+Option ::= ShortOption | LongOption
+ShortOption ::= ShortFlagOption | ShortValueOption
+LongOption ::= LongFlagOption | LongValueOption
+ShortFlagOption ::= '-' Alphanumeric
+ShortValueOption ::= '-' Alphanumeric OptionValueDelimiter Value
+LongFlagOption ::= '--' Alphanumeric AlphanumericAnd*
+LongValueOption ::= '--' Alphanumeric AlphanumericAnd* OptionValueDelimiter Value
+OptionValueDelimiter ::= Space | '='
+Alphanumeric ::= [0-9a-zA-Z]
+AlphanumericAnd ::= [0-9a-zA-Z-_]
+Value ::= Char* | '"' ( Char | Space )* '"'
+Char ::= ( UnicodeExceptDoubleQuotes | '\"' )
+Space ::= ( U+0020 )*
+Operand ::= Value
+```
+
+This grammar is also available as a [railroad diagram](./assets/cli-railroad/index.md).