• Stars
    star
    631
  • Rank 71,222 (Top 2 %)
  • Language
    Go
  • License
    MIT License
  • Created almost 9 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Render ASCII art as SVG diagrams

GoAT: Go ASCII Tool

What GoAT Can Do For You

  • From a chunky ASCII-art source drawing, render polished, graphically-rich SVG, with the goat CLI command.

  • Tie together all three of:

    1. Your code's major data structures or abstract data/control flows.
    2. Related ASCII-art diagrams embedded in comments, adjacent to the source code.
    3. Polished line diagrams in your user-facing high-level documentation, with inline links to SVG produced by goat. For Markdown or similar formats, links may be expanded either at build-time or run-time, as needed by your doc tool suite.

    Your ASCII-art source persists as the single-point-of-truth, revision-controlled along with the code that embeds it. This README contains an example.

You Will Also Need

Graphical- or Rectangle-oriented text editing capability

Both vim and emacs offer useful support. In Emacs, see the built-in rectangle-editing commands, and picture-mode.

A fixed-pitch font with 2:1 height:width ratio as presented by your editor and terminal emulator

Most fixed-pitch or "monospace" Unicode fonts maintain a 2:1 aspect ratio for characters in the ASCII range, and all GoAT drawing characters are ASCII. However, certain Unicode graphical characters e.g. MIDDLE DOT may be useful, and conform to the width of the ASCII range.

CJK characters on the other hand are typically wider than 2:1. Non-standard width characters are not in general composable on the left-right axis within a plain-text drawing, because the remainder of the line of text to their right is pushed out of alignment with rows above and below.

Installation

$ go install github.com/blampe/goat/cmd/goat@latest

Examples

Here are some snippets of GoAT-formatted UTF-8 and the SVG each can generate. The SVG you see below was linked to by inline Markdown image references (howto, spec) from GoAT's README.md, then finally rendered to HTML <img> elements by Github's Markdown processor

Trees


          .               .                .               .--- 1          .-- 1     / 1
         / \              |                |           .---+            .-+         +
        /   \         .---+---.         .--+--.        |   '--- 2      |   '-- 2   / \ 2
       +     +        |       |        |       |    ---+            ---+          +
      / \   / \     .-+-.   .-+-.     .+.     .+.      |   .--- 3      |   .-- 3   \ / 3
     /   \ /   \    |   |   |   |    |   |   |   |     '---+            '-+         +
     1   2 3   4    1   2   3   4    1   2   3   4         '--- 4          '-- 4     \ 4


Overlaps


           .-.           .-.           .-.           .-.           .-.           .-.
          |   |         |   |         |   |         |   |         |   |         |   |
       .---------.   .--+---+--.   .--+---+--.   .--|   |--.   .--+   +--.   .------|--.
      |           | |           | |   |   |   | |   |   |   | |           | |   |   |   |
       '---------'   '--+---+--'   '--+---+--'   '--|   |--'   '--+   +--'   '--|------'
          |   |         |   |         |   |         |   |         |   |         |   |
           '-'           '-'           '-'           '-'           '-'           '-'

Line Decorations

                ________                            o        *          *   .--------------.
   *---+--.    |        |     o   o      |         ^          \        /   |  .----------.  |
       |   |    '--*   -+-    |   |      v        /            \      /    | |  <------.  | |
       |    '----->       .---(---'  --->*<---   /      .+->*<--o----'     | |          | | |
   <--'  ^  ^             |   |                 |      | |  ^    \         |  '--------'  | |
          \/        *-----'   o     |<----->|   '-----'  |__|     v         '------------'  |
          /\                                                               *---------------'

Line Ends

   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  \  \   *  o      | | | |   | | | |    \ \ \ \   \ \ \ \    / / / /   / / / /
   v  v   ^  ^   v  v   ^  ^     o * v '   o * v '     o * v \   o * v \  o * v /   o * v /
   *  o   |  |    *  o   \  \

   <--o   <--*   <-->   <---      ---o   ---*   --->   ----      *<--   o<--   -->o   -->*


Dot Grids


  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    路 路 * 路
  o o o o o  * * * * *  * * * * o    o o o      * * *      o * o     路 路 路 路 路     路 路 *


Note that '路' above is not ASCII, but rather Unicode, the MIDDLE DOT character, encoded with UTF-8.

Large Nodes


   .---.       .-.        .-.       .-.                                       .-.
   | A +----->| 1 +<---->| 2 |<----+ 4 +------------------.                  | 8 |
   '---'       '-'        '+'       '-'                    |                  '-'
                           |         ^                     |                   ^
                           v         |                     v                   |
                          .-.      .-+-.        .-.      .-+-.      .-.       .+.       .---.
                         | 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D |
                          '-'      '---'        '-'      '---'      '-'       '-'       '---'

Small Grids

       ___     ___      .---+---+---+---+---.     .---+---+---+---.  .---.   .---.
   ___/   \___/   \     |   |   |   |   |   |    / \ / \ / \ / \ /   |   +---+   |
  /   \___/   \___/     +---+---+---+---+---+   +---+---+---+---+    +---+   +---+
  \___/ b \___/   \     |   |   | b |   |   |    \ / \a/ \b/ \ / \   |   +---+   |
  / a \___/   \___/     +---+---+---+---+---+     +---+---+---+---+  +---+ b +---+
  \___/   \___/   \     |   | a |   |   |   |    / \ / \ / \ / \ /   | a +---+   |
      \___/   \___/     '---+---+---+---+---'   '---+---+---+---'    '---'   '---'


Big Grids

    .----.        .----.
   /      \      /      \            .-----+-----+-----.
  +        +----+        +----.      |     |     |     |          .-----+-----+-----+-----+
   \      /      \      /      \     |     |     |     |         /     /     /     /     /
    +----+   B    +----+        +    +-----+-----+-----+        +-----+-----+-----+-----+
   /      \      /      \      /     |     |     |     |       /     /     /     /     /
  +   A    +----+        +----+      |     |  B  |     |      +-----+-----+-----+-----+
   \      /      \      /      \     +-----+-----+-----+     /     /  A  /  B  /     /
    '----+        +----+        +    |     |     |     |    +-----+-----+-----+-----+
          \      /      \      /     |  A  |     |     |   /     /     /     /     /
           '----'        '----'      '-----+-----+-----'  '-----+-----+-----+-----+


Complicated

+-------------------+                           ^                      .---.
|    A Box          |__.--.__    __.-->         |      .-.             |   |
|                   |        '--'               v     | * |<---        |   |
+-------------------+                                  '-'             |   |
                       Round                                       *---(-. |
  .-----------------.  .-------.    .----------.         .-------.     | | |
 |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
 | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
 '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
    |            |   |    | '---.        |               '-------'       |       '-+------'
    |<---------->|   |    |      |       v                Interior                 |     ^
    '           <---'      '----'   .-----------.              ---.     .---       v     |
 .------------------.  Diag line    | .-------. +---.              \   /           .     |
 |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
 |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
 '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
 <--+---+-----'       |     /|\                                                    |  | 3 |
                      v                             not:line    'quotes'        .-'   '---'
  .-.             .---+--------.            /            A || B   *bold*       |        ^
 |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
  '-'             '---------+--'          /           Nor/is this.            ---

More examples are here

The GoAT Library

The core engine of goat is accessible as a Go library package, for inclusion in specialized code of your own. The code implements a subset, and some extensions, of the ASCII diagram generation function of the browser-side Javascript in Markdeep.

library Data Flow

The diagram above was derived by ./make.sh from ASCII-art in the Go source file ./goat.go.

Project Tenets

  1. Utility and ease of integration into existing projects are paramount.
  2. Compatibility with MarkDeep desired, but not required.
  3. TXT and SVG intelligibility are co-equal in priority.
  4. Composability of TXT not to be sacrificed -- only width-8 characters allowed.
  5. Per-platform support limited to a single widely-available fixed-pitch TXT font.