index.html

<head>
  <script src="typograms.js"></script>
 
  <link href="google-sans.css" media="screen" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/a11y-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

  <style>
   html, body, .header {
       margin: 0;
       padding: 0;
       font-family: Google Sans,Roboto,Arial,Helvetica,sans-serif;
   }
   .menu {
       display: none;
   }
   @media (min-width:1025px) {
       .menu {
           display: block;
       }
   }

   .header a, .header a:visited, .header a:hover, .header a:active,
   .menu a, .menu a:visited, .menu a:hover, .menu a:active {
       color: inherit;
       text-decoration: inherit;
   }

   .menu a, .menu a:visited, .menu a:hover, .menu a:active {
       font-weight: bold;
       color: #999;
   }

   .menu ul {
       list-style: none;
   }
   .header {
       box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%), inset 0 -1px 0 0 #dadce0;
       /** padding: 1em; **/
       position: fixed;
       width: 100%;
       top: 0;
       background-color: white;
       z-index: 1;
       /** height: 32px; **/
   }
   .body {
       margin: auto;
       position: absolute;
       overflow-y: scroll;
       top: 64px;
       bottom: 0px;
       right: 0px;
       left: 0px;
       outline: none;
       background-color: white;
   }
   .container, main {
       max-width: 740px;
       margin: auto;
   }
   .container {
       padding: 1em;
       font-size: 1.3125rem;
       font-weight: 500;
       line-height: 1.16667em;
   }
   main {
       margin-bottom: 4em;
       margin-top: 4em;
   }
   .menu {
       position: fixed;
       padding: 2em 4em;
   }

   pre code.hljs {
       padding: 0 1em;
   }
 </style>
</head>

<div class="header">
  <div class="container"><a href="https://google.github.io/typograms/">Typograms</a></div>
</div>
<div class="body">
  <div class="menu">
    <a href="#overview">Overview</a>
    <br><br><a href="#installation">Installation</a>
    
    <br><br><a href="#primitives">Primitives</a>
    <ul>
      <li><a href="#pipes">Pipes</a></li>
      <li><a href="#dots">Dots</a></li>
      <li><a href="#arrows">Arrows</a></li>
      <li><a href="#text">Text</a></li>
    </ul>

    <a href="#examples">Examples</a>
    <ul>
      <li><a href="#protocols">Protocols</a></li>
      <li><a href="#mocks">Mocks</a></li>
      <li><a href="#architecture">Architecture</a></li>
      <li><a href="#tables">Tables</a></li>
      <li><a href="#flowcharts">Flowcharts</a></li>
      <li><a href="#trees">Trees</a></li>
      <li><a href="#shapes">Shapes</a></li>
      <li><a href="#grids">Grids</a></li>
      <li><a href="#series">Time series</a></li>
      <li><a href="#chips">Chips</a></li>
      <li><a href="#circuits">Circuits</a></li>
      <li><a href="#mindmaps">Mindmaps</a></li>
      <li><a href="#scribbles">Scribbles</a></li>
    </ul>

    <a href="#wip">Work in Progress</a>
    <br><br><a href="#related">Related</a>
    <br><br><a href="#specification">Specification</a>
  </div>
  <main>

    <h1 id="overview">Overview</h1>

    <p>Typograms (typographic diagrams) is a lightweight image format (<code>text/typogram</code>) useful for defining simple diagrams in technical documentation.</p>

    <p>Like markdown, typograms is heavily inspired by pre-existing conventions found in <a href="https://en.wikipedia.org/wiki/ASCII_art">ASCII</a> diagrams. A small set of <a href="#primitives">primitives</a> and rules to connect them is defined, which you can use to build larger <a href="#examples">diagrams</a>.</p>

    <p>Typograms optimizes for editability and portability (e.g. plain text is easy to maintain, change, store and transmit), at the cost of expressivity (e.g. SVG is more expressive) and ergonomics (e.g. higher level tools produce diagrams faster).</p>
    
    <p>A comparison with <a href="#related">related</a> work is available below.</p>

    <p>A <a href="#installation">polyfill</a> is available that allows you use to use it in browsers.</p>

    <h1 id="installation">Installation</h1>

    To get started, the easiest way to use typograms is to link from our CDN:

    <pre>
      <code class="language-html">
&lt;body&gt;
  &lt;script src="https://google.github.io/typograms/typograms.js"&gt;&lt;/script&gt;
  &lt;script type="text/typogram"&gt;
+----+
|    |---> My first diagram!
+----+
  &lt;/script&gt;
&lt;/body&gt;
      </code>
    </pre>

    From there, you can <a href="https://github.com/samuelgoto/typograms">download</a> the library directly to serve yourself.

    You can also use it as a command line tool or a node library:

    https://github.com/google/typograms
    
    <h1 id="primitives">Primitives</h1>

    <p>Typograms are composed of primitives and connectors that combine them: pipes (<code>| - _ \ / : ~</code>), dots arrows (<code>> ^ * o # v < </code>) and Connectors (<code>+ . -</code>).</p>
    
    <p>By putting them together, you can form a lot of different <a href="#examples">diagrams</a>.</p>
    
    <h2 id="pipes">Pipes</h2>
    <script type="text/typogram">

  +- -+  -+ +-  |   |   | |   -+-  |    /  \  \     /  +-  -+  +- -+    +   \ /   \   /
  |   |   | |   +- -+  -+ +-   |  -+-  +-  -+  +- -+    \  /  /     \  / \   +     + +
                                                                                  /   \

  .- -.  -. .-  |   |   | |   -.-  |    /  \  \     /  .-  -.  .- -.    .   \ /   \   / 
  |   |   | |   '- -'  -' '-   |  -'-  '-  -'  '- -'    \  /  /     \  / \   '     . .  
                                                                                  /   \   

   _ _   _   _                ___                       _  _   __ __    _         \   /
  |   |   | |   |_ _|  _| |_   |  _|_  /_  _\  \_  _/   \  /  /     \  / \  \_/   |   |
                                                                                  /   \

                                                                                          
  +~ ~+  ~+ +~  :   :   : :   ~+~  : 
  :   :   : :   +~ ~+  ~+ +~   :  ~+~

           /    \
   /\  \/  \    /

  -.   .-  -. .-. .-  .-.
   '- -'    '-' '-'   '-'
    </script>

    <h2 id="dots">Dots</h2>
    <script type="text/typogram">
  o-o   *-o   #-o   |  |  |  \ /    \   /     \ / \   /     \ / \   /
  o-*   *-*   #-*   o  *  #   o  o   o o    *  *   * *    #  #   # #
  o-#   *-#   #-#   |  |  |     / \ /   \  / \    /   \  / \    /   \
    </script>

    <h2 id="arrows">Arrows</h2>
    <script type="text/typogram">

          |  ^   ^  ^    /  \ 
  ->  <-  v  |  /    \  v    v

  ->|  |<- ->o  o<-  ->* *<-  -># #<-           

  -   _   *   o   #
  ^   ^   ^   ^   ^     
  |   |   |   |   |     

  |   |   |   |   |
  v   v   v   v   v
  -   _   *   o   #   

                                  ----
  \ |  | /     ^|  |^   \    /    ^  ^
   v|  |v     / |  | \   v  v    /    \
                         ----    
    </script>

    <h2 id="text">Text</h2>
    <script type="text/typogram">
"Anything between double quotes is rendered as text!"
    </script>

    <h1 id="examples">Examples</h1>

    <h2 id="protocols">Protocols</h2>
        
    <script type="text/typogram">
+-----+            +-----+
|  A  |            |  B  |
+--+--+            +--+--+
   | foo              |
   |----------------->|
   | hello            |
   |----------------->|--+
   |           world  |  | prompts the user
   |<-----------------|--+
   |                  |
 --+--              --+--
    </script>   

    <h2 id="mocks">Mocks</h2>
        
    <script type="text/typogram">
.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.
    </script>

<h2 id="architecture">Architecture</h2>

    <h3>Components</h3>
    
    <script type="text/typogram">
    Sender                Mail Server              Receiver
                             _____
  .---------.    SMTP       |=====|      POP      .---------.
  |         |-------------->|     |<--------------|         |
  |  Alice  |               |     |               |   Bob   |
  +---------+               |  o  |               +---------+
 /// _____ \\\              |_____|              /// _____ \\\
'-------------'                                 '-------------'
                    +---------------------+
                    |"To: bob@bar.com"    |
                    |"From: alice@foo.com"|
                    |"Body: Hi!"          |
                    +---------------------+
    </script>   
    
    <h3>Layers</h3>
    
    <script type="text/typogram">
 .---.  .---. .---.  .---.    .---.  .---.
 '---'  '---' '---'  '---'    '---'  '---'
   |      |     |      |        |      |
   v      v     |      v        |      v
 .------------. | .-----------. |  .-----.
 | Filesystem | | | Scheduler | |  | MMU |
 '------------' | '-----------' |  '-----'
        |       |      |        |
        v       |      |        v
     .----.     |      |    .~~~~~~~~~.
     | IO |<----'      |    : Network :
     '----'            |    '~~~~~~~~~'
        |              |         |
        v              v         v
 .---------------------------------------.
 |                  HAL                  |
 '---------------------------------------'
    </script>

    <h2 id="tables">Tables</h2>

    <script type="text/typogram">
+-----+---------+---------+~~~  ~~~+----------+
| ID  | First   | Last    :        : Lang     |
+-----+---------+---------+~~~  ~~~+----------+
| 1   | Joe     | Doe     :        : en-US    |
+-----+---------+---------+~~~  ~~~+----------+
| 2   | Rick    | Russel  :        : en-US    |
+-----+---------+---------+~~~  ~~~+----------+
:     :         :         :        :          :

:     :         :         :        :          :
+-----+---------+---------+~~~  ~~~+----------+
| 999 | Anna    | Merkle  :        : pt-BR    |
+-----+---------+---------+~~~  ~~~+----------+
    </script>   

    <h2 id="flowcharts">Flow charts</h2>
    
    <script type="text/typogram">
  .-------.                   +
  | START |                  / \       
  '---+---'                 /   \      +-+---------+-+    ___________
      |        .-----.     /     \     | | COMPLEX | |   /           \
      v        | END |<---+CHOICE +--->| |         | |->+ PREPARATION +-> X
   +-------+   '-----'     \     /     | | PROCESS | |   \___________/
  / INPUT /                 \   /      +-+---------+-+ 
 +-------+                   \ /
      |                       +
      v                       ^
 +---------+             +----+----+
 | PROCESS |------------>| PROCESS |<----- x
 +---------+             +---------+
    </script>

    <h2 id="trees">Trees</h2>
    
    <script type="text/typogram">
      +              +              +-- 1        .-- 1     / 1
     / \             |           +--+         .--+        + 
    /   \        +---+---+       |  +-- 2     |  '-- 2   / \ 2
   +     +       |       |     --+          --+         +  
  / \   / \    +-+-+   +-+-+     |  +-- 3     |  .-- 3   \ / 3
 /   \ /   \   |   |   |   |     +--+         '--+        +  
1    2 3    4  1   2   3   4        +-- 4        '-- 4     \ 4


Linux
 +--Android
 +--Debian
 |   +--Ubuntu
 |   |   +--Lubuntu
 |   |   +--Kubuntu
 |   |   +--Xubuntu
 |   |   `--Xubuntu
 |   `--Mint
 +--Centos
 `--Fedora

      
    X            Y
   / \          / \
  A   Y   ->   X   C
     / \      / \
    B   C    A   B

    </script>

    <h2 id="shapes">Shapes</h2>
    <h3>Big Shapes</h3>
    <script type="text/typogram">
  +---------+  +  +------+       .-----.  +~~~~~+     +----+       +----+
   \       /  / \  \      \      |     |  :     :    /      \     /      \
    \     /  /   \  \      \     |     |  :     :   /        \   |        |
     \   /  /     \  \      \    |     |  :     :   \        /   |        |
      \ /  /       \  \      \   |     |  :     :    \      /     \      /
       +  +---------+  +------+  '-----'  +~~~~~+     +----+       +----+
    </script>   

    <h3>Small Shapes</h3>
    <script type="text/typogram">
   __        ____     ___                     .---.     __        +-+  +-+
  /  \   /\  \  /  +  \ /  /\   +-+  +-+ +-+  |   | ++ |  |  _   / /    \ \
  \__/  /__\  \/  /_\  +  /  \  +-+ /_/   \_\ '---' ++ |__| |_| +-+      +-+
                         +----+
    </script>   

    <h3>Overlaps and intersections</h3>
    <script type="text/typogram">                                                                                           
      .---.         .---.         .---.         .---.         .---.           
      |   |         |   |         |   |         |   |         |   |          
   .--+---+--.   .--+---+--.   .--|   |--.   .--+   +--.   .----  |---.       
   |         |   |  |   |  |   |  |   |  |   |         |   |          |      
   '--+---+--'   '--+---+--'   '--|   |--'   '--+   +--'   '--|  -----'       
      |   |         |   |         |   |         |   |         |   |          
      '---'         '---'         '---'         '---'         '---'           
    </script>
           
    <h2 id="grids">Grids</h2>
    <h3>Big grids</h3>
    <script type="text/typogram">
    +----+        +----+                                                                                                         
   /      \      /      \            .-----+-----+-----.                                                                         
  +        +----+        +----+      |     |     |     |          .-----+-----+-----+-----+                                      
   \      /      \      /      \     |     |     |     |         /     /     /     /     /                                       
    +----+        +----+        +    +-----+-----+-----+        +-----+-----+-----+-----+                                        
   /      \      /      \      /     |     |     |     |       /     /     /     /     /
  +        +----+        +----+      |     |     |     |      +-----+-----+-----+-----+
   \      /      \      /      \     +-----+-----+-----+     /     /     /     /     /
    +----+        +----+        +    |     |     |     |    +-----+-----+-----+-----+
          \      /      \      /     |     |     |     |   /     /     /     /     /
           +----+        +----+      '-----+-----+-----'  '-----+-----+-----+-----+
    </script>   

    <h3>Small grids</h3>
    <script type="text/typogram">
       ___     ___      .---+---+---+---+---.     .---+---+---+---.  .---.   .---. 
   ___/   \___/   \     |   |   |   |   |   |    / \ / \ / \ / \ /   |   +---+   |
  /   \___/   \___/     +---+---+---+---+---+   +---+---+---+---+    +---+   +---+
  \___/   \___/   \     |   |   |   |   |   |    \ / \ / \ / \ / \   |   +---+   |
  /   \___/   \___/     +---+---+---+---+---+     +---+---+---+---+  +---+   +---+
  \___/   \___/   \     |   |   |   |   |   |    / \ / \ / \ / \ /   |   +---+   |
      \___/   \___/     '---+---+---+---+---'   '---+---+---+---'    '---'   '---'
    </script>   

    <h3>Dot grids</h3>
    <script type="text/typogram">
  o o o o o    * * * * *    o * * * o     o o o       * * *    . * . . .
  o o o o o    * * * * *    * o o o *    o o o o     * * * *   . o . . .
  o o o o o    * * * * *    o o o o *   o o o o o   * * * * *  . . . . .
  o o o o o    * * * * *    * * * o o    o o o o     * * * *   . o o * .
  o o o o o    * * * * *    o o o * *     o o o       * * *    . o o o o
    </script>   

    <h2 id="series">Time series</h2>
    
    <script type="text/typogram">
  85.67 ┤                                       ╭╮
  78.20 ┤                                       ││                  ╭╮
  70.73 ┤                                       ││  ╭╮ ╭╮ ╭╮   ╭╮  ╭╯╰─╮
  63.27 ┤                        ╭╮         ╭─╮ ││ ╭╯╰╮│╰─╯╰╮╭╮│╰──╯   │╭
  55.80 ┤   ╭╮                 ╭╮││╭╮ ╭╮╭╮  │ ╰─╯╰─╯  ││    ││││       ╰╯
  48.33 ┤   │╰╮      ╭──╮      │││││╰╮│╰╯│  │         ╰╯    ╰╯╰╯
  40.87 ┤╭╮ │ ╰╮╭╮  ╭╯  ╰─╮╭╮╭─╯╰╯╰╯ ╰╯  ╰──╯
  33.40 ┤││ │  ╰╯╰╮╭╯     ││╰╯
  25.93 ┤││╭╯     ╰╯      ╰╯
  18.47 ┼╯││
  11.00 ┤ ╰╯
        └───────────┴───────────┴───────────┴───────────┴───────────┴────
      2011        2012        2013        2014        2015        2016

    E +-------------------------*--+     E |                         o
    D |-------------------*--*--|--*     D |                   o  o  |  o
    C |-------------*--*  |  |  |  |     C |             o  o  |  |  |  |
    B |-------*--*  |  |  |  |  |  |     B |       o  o  |  |  |  |  |  |
    A +-*--*--+--+--+--+--+--+--+--+     A +-o--o--|--|--|--|--|--|--|--|
        5 10 15 20 25 30 35 40 45 50         5 10 15 20 25 30 35 40 45 50
      
        ▲
    Uin :   .------------------------
        :   |
        :   |
        *---'~~~~~~~~~~~~~~~~~~~~~~~~▶

     Udc▲
Udc_OK  :      .---------------------
        :     /  :       :
        :    /   :       :
        *---'~~~~:~~~~~~~:~~~~~~~~~~~▶
                 :<----->:
                   500ms
        ▲
        :
Cpu.Qon :~~~~~~~~~~~~~~~~.-----------
        :                | Inactive
        :     Active     |
        *----------------'~~~~~~~~~~~▶
     </script>   

    <h2 id="chips">Chips</h2>
    <script type="text/typogram">
                                  +-----+
     +----[PWR]-------------------| USB |--+
     |                            +-----+  |
     |        "GND/RST2" [ ][ ]            |
     |     "MOSI2/SCK2"  [ ][ ]"A5/SCL"[ ] |   C5 
     |        "5V/MISO2" [ ][ ]"A4/SDA"[ ] |   C4 
     |                            AREF [ ] |
     |                             GND [ ] |
     | [ ]"N/C"                "SCK/13"[ ] |   B5
     | [ ] IOREF              "MISO/12"[ ] |  "."
     | [ ] RST                "MOSI/11"[ ]~|  "."
     | [ ] 3V3   +---+              10 [ ]~|  "."
     | [ ] 5v    | A |               9 [ ]~|  "."
     | [ ] GND  -| R |-              8 [ ] |   B0
     | [ ] GND  -| D |-                    |
     | [ ] Vin  -| U |-              7 [ ] |   D7
     |          -| I |-              6 [ ]~|  "."
     | [ ] A0   -| N |-              5 [ ]~|  "."
     | [ ] A1   -| O |-              4 [ ] |  "."
     | [ ] A2    +---+         "INT1/3"[ ]~|  "."
     | [ ] A3                  "INT0/2"[ ] |  "."
     | [ ]"A4/SDA"RST SCK MISO   "TX>1"[ ] |  "."
     | [ ]"A5/SCL"[ ] [ ] [ ]    "RX<0"[ ] |   D0
     |            [ ] [ ] [ ]              |
     | "UNO_R3"   GND MOSI 5V   ___________|
     |_________________________| 
    </script>

    <h2 id="circuits">Circuits</h2>
    <script type="text/typogram">
      "+10-15V"          ___0,047R
      *---------o-----o-|___|-o--o---------o----o-------.
   "+"|         |     |       |  |         |    |       |
    -===-      _|_    |       | .+.        |    |       |
    -===-      .-.    |       | | | 2k2    |    |       |
    -===-    470|"+"  |       | | |        |    |      _|_
   "-"|       uF|     '--.    | '+'       .+.   |      \ / LED
      +---------o        |6   |7 |8    1k | |   |      -+-
             ___|___   .-+----+--+--.     | |   |       |
              -═══-    |            |     '+'   |       |
                -      |            |1     |  |/  BC    |
               GND     |            +------o--+   547   |
                       |            |      |  |`>       |
                       |            |     .+.   |       |
               .-------+            | 220R| |   o----||-+  IRF9Z34
               |       |            |     | |   |    |+->
               |       |  MC34063   |     `+'   |    ||-+
               |       |            |      |    |       |  BYV29     -12V6
               |       |            |      '----'       o--|<-o----o--X OUT
 6000 micro "-"|"+"    |            |2                  |     |    |
 Farad, 40V ___|_____  |            |--o                C|    |    |
 Capacitor  ~ ~ ~ ~ ~  |            | GND         30uH  C|    |   --- 470
               |       |            |3      1nF         C|    |   ###  uF
               |       |            |-------||--.       |     |    | +
               |       '-----+----+-'           |      GND    |   GND
               |            5|   4|             |             |
               |             |    '-------------o-------------o
               |             |                           ___  |
               `-------------*------/\/\/------------o--|___|-'
                                     2k              |       1k0
                                                    .+.
                                                    | | 5k6 + 3k3
                                                    | | in Serie
                                                    '+'
                                                     |
                                                    GND
    </script>

    <h2 id="mindmaps">Mindmaps</h2>
    <script type="text/typogram">
                                            .-->  Alpha
                                           /
                                          .---->  Initial Release
          Planning *-------.             /         \
                            \           /           '---> Patch 1
      Initial research       \         /             \
                *             \       /               '-->  Patch 2
                 \             \     /---------> Beta
                  \             \   /
                   \             o o                     _______
                    \          .---. *-----.            /       \
                     '------>  |   |       '------o->  . Release .
                               `---' o                  \_______/
                               o  o o \
                              /    \ \ \
                          .--'      \ \ \
                         /           \ \ '----+->  Push backs
                        /             \ \      \
                       /|              \ \      '----> Setbacks
                      / |               \ \
                     V /|                \ '-----> Reception
                Team  / |                 \
                     v /|                  \
             Worklaod / .                   '-->> Career change
                     V /
                 PTO  /
                     V
                 Bug
    </script>

    <h2 id="scribbles">Scribbles</h2>
    <h3>Lines with decorations</h3>
    <script type="text/typogram">
          +----+     o    |          o       *      *   .----------.
  *-+---. '-* -+-    |    v         ^         \    /    |.--------.|
    |   '--->   +----+  ->*<-      /   .-+->*<-o--+     |'------> ||
  <-'       *---+     |<----->|   +----' |  ^   \       '---------'|
                                         |__|    v      *----------'

                                   .--->  F
          A       B      C  D     /
          *-------*-----*---*----*----->  E
                   \            ^ \
                    \          /   '--->  G
                     B --> C -+
                                         
    </script>
    
    <h3>Line ends</h3>
    <script type="text/typogram">
 o-o *-o   /  /  * o  o o o o  * * * *  o o o o  * * * *     o o o o  * * * * 
 o-* *-*  v  v   ^ ^  | | | |  | | | |   \ \ \ \  \ \ \ \   / / / /  / / / /
 o-> *-> *  o    | |  o * v    o * v      o * v    o * v   o * v    o * v  
 o-  *-              

 ^ ^  * o  |  |                           ^ ^ ^ ^             ^ ^ ^
 | |  ^ ^  v  v   *  o   ^ ^ ^ ^  | | | |  \ \ \ \  \ \ \ \  / / /  / / / /
 * o       *  o   ^  ^  o * v     o * v     o * v    o * v  o * v  o * v 
  
 <-o <-* <-> <-                   -o -* -> -- *<- o<- ->o ->*

    \ | /
 \   vvv   /           \ | /
  v+-----+v             vvv
 ->|     |<-           ->*<-
  ^+-----+^             ^^^
 /   ^^^   \           / | \
    / | \
  
    </script>

    <h3>Graph with small nodes</h3>
    <script type="text/typogram">
 A   1    2   4                 8
 *-->o<-->o<--o---------.       o
          ^   ^         |       ^
          |   |         v       |
          o<->*<-->o--->*-->o-->o<-->*
          3   B    5    C   6   7    D
    </script>

    <h3>Graphic diagrams</h3>
    
    <script type="text/typogram">
     0       3                         P *              Eye /         ^     /
     *-------*      +y                    \                +)          \   /  Reflection
  1 /|    2 /|       ^                     \                \           \ v
   *-+-----* |       |                v0    \       v3           --------*--------
   | |4    | |7      | ◄╮               *----\-----*
   | *-----|-*     ⤹ +-----> +x        /      v X   \                o
   |/      |/       / ⤴               /        o     \              / \
   *-------*       v                 /                \            /   \
  5       6      +z              v1 *------------------* v2       o-----o
    </script>   


    <h1 id="wip">Work in Progress</h1>

    <p>This is a list of constructions that are currently looking into supporting.</p>

    <h2>UT8 Diagram Characters Are Off</h2>

<script type="text/typogram">
┌─────────────────────────────────┐       ┌─────────────────────────────────┐
| ┌─────────────────────────────┐ |       | ┌─────────────────────────────┐ |
| | "https://rp.example"        | |       | | "https://rp.example"        | |
| └─────────────────────────────┘ |       | └─────────────────────────────┘ |
| ┌─────────────────────────────┐ |       | ┌─────────────────────────────┐ |
| |                             | |       | |                             | |
| |   Welcome to my website!    | |       | |  Welcome to my website!     | |
| |                             | |       | |                             | |
| |                             | |       | |                             | |
| +─────────────────────────────+ |       | +─────────────────────────────+ |
| |       Choose an account     | |       | |    Sign-in to rp.example    | |
| |   to sign-in to rp.example  | |       | |      with idp.example?      | |
| |                             | |       | |                             | |
| | ┌────┐                      | |       | | ┌────┐                      | |
| | | :) |  John Doe            | |  ──►  | | | :) |  John Doe            | |
| | └────┘  john@email.com      | |       | | └────┘  john@email.com      | |
| | ┌────┐                      | |       | |                             | |
| | | :] |  John Doe            | |       | | ┌─────────────────────────┐ | |
| | └────┘  john.doe@work.com   | |       | | |    Continue as John     | | |
| |                             | |       | | └─────────────────────────┘ | |
| └─────────────────────────────┘ |       | └─────────────────────────────┘ |
└─────────────────────────────────┘       └─────────────────────────────────┘
</script>
    
    <h2>Triangles connected without + aren't pointy</h2>
    <script type="text/typogram" zoom=3 grid>
 /
 \
    </script>

    <h2>Diagonals don't join with underscores</h2>
    <script type="text/typogram" zoom=3 grid>
 ___
/   \
    </script>

    <h2>Text detection gets confused</h2>
    <script type="text/typogram" zoom=3 grid>
-----
"|||"
    </script>

    <h2>Small curved steps</h2>
    <script type="text/typogram">
"      -._ _.-                        "
    </script>

    <h2>Parenthesis and spheres</h2>
    
    <script type="text/typogram">
"      \  /  |  |                     "
"      (  ) (    )                    "
"      /  \  |  |                     "
"   __   .-.    .-.   |   |   /  \    "
"  (__) ( 1 )  |   |   '-'   +)  (+   "
"        '-'                  \  /    "
    </script>

    <h2>Diagonal Side-way Arrows</h2>
    <script type="text/typogram">
"  \    /   \    /    >  <    <   >   "
"   >  <    <    >   /    \   /   \   "
    </script>
    
    <h1 id="related">Related Work</h1>

    <p>The closest work to typograms is <a href="https://github.com/ivanceras/svgbob">svgbob</a>: it renders diagrams from ASCII and works in browsers (through a webassembly port which spits out SVGs). It supports a similar set of features (with the notable exception of its support for circle drawing) and picks a similar set of typographic conventions (with the notable exception of text rendering). It is well-<a href="https://ivanceras.github.io/content/Svgbob/Specification.html">specified</a>. I ran into enough challenges with (a) the text rendering and (b) running in the browser through the webassembly port that motivated me to rewrite it in JS (svgbob is written in rust), but is otherwise a perfectly valid (more mature) alternative.</p>
    
    <p>From there, there is a series of projects that rendered images from ASCII diagrams but weren't either (a) particularly good to be used in isolation (i.e. just diagrams) or (b) on webpages (i.e. running natively in browsers): <a href="https://github.com/asciitosvg/asciitosvg">asciitosvg</a>, <a href="http://ditaa.sourceforge.net/">ditaa</a> and <a href="https://casual-effects.com/markdeep/features.md.html">markdeep</a> (and the go port <a href="https://github.com/blampe/goat">GoAT</a>) most notably.</p>

    <p>Unlike libraries like <a href="https://github.com/mermaid-js/mermaid">mermaid</a>, typograms are defined typographically (WYSWYG), rather than semantically (a transformation from a high level description to graphics), which picks a different trade-off: it gives you more control over the rendering (expressivity) at the cost of making you type more (productivity).</p>
    
    <h1 id="specification">Specification</h1>
    
    <br>
    <script>
customElements.define("typo-gram", class Typogram extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    //console.log("hello");
    //console.log(this.innerHTML);
  }
});
    </script>

    <typo-gram>
    </typo-gram>

  </main>
</div>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
    //if (hljs) {
    //  hljs.highlightElement(el);
    //}
  });
});
</script>