Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blampe/goat
Render ASCII art as SVG diagrams
https://github.com/blampe/goat
Last synced: 3 days ago
JSON representation
Render ASCII art as SVG diagrams
- Host: GitHub
- URL: https://github.com/blampe/goat
- Owner: blampe
- License: mit
- Created: 2016-02-09T08:26:14.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-07-31T05:36:13.000Z (5 months ago)
- Last Synced: 2024-10-27T20:18:46.410Z (3 months ago)
- Language: Go
- Size: 359 KB
- Stars: 661
- Watchers: 11
- Forks: 42
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-github-stars - blampe/goat - Render ASCII art as SVG diagrams (Go)
README
# GoAT: Go ASCII Tool
## What **GoAT** Can Do For You
- From a chunky ASCII-art source drawing, render polished, graphically-rich [SVG](#complicated),
with the [goat](#installation) 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](./cmd/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](#library-data-flow).## 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
```## Example Graphics
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](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#images),
[spec](https://github.github.com/gfm/#images)) from
GoAT's [README.md](README.md), then finally rendered to HTML `````` 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```
![](/examples/trees.svg)### Trees -- mid-range color value
Setting a foreground color in the middle of the possible range of value or luminance
is one way to work around a limitation of certain browsers e.g. Safari.
Safari does not support inheritance of
the [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
CSS property by
`goat`'s output `` element
from within an enclosing `` element such as are generated by Markdown.![](/trees.mid-blue.svg)
### Overlaps
```.-. .-. .-. .-. .-. .-.
| | | | | | | | | | | |
.---------. .--+---+--. .--+---+--. .--| |--. .--+ +--. .------|--.
| | | | | | | | | | | | | | | | | |
'---------' '--+---+--' '--+---+--' '--| |--' '--+ +--' '--|------'
| | | | | | | | | | | |
'-' '-' '-' '-' '-' '-'```
![](/examples/overlaps.svg)### Line Decorations
```
________ o * * .--------------.
*---+--. | | o o | ^ \ / | .----------. |
| | '--* -+- | | v / \ / | | <------. | |
| '-----> .---(---' --->*<--- / .+->*<--o----' | | | | |
<--' ^ ^ | | | | | ^ \ | '--------' | |
\/ *-----' o |<----->| '-----' |__| v '------------' |
/\ *---------------'```
![](/examples/line-decorations.svg)### 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 -->*
```
![](/examples/line-ends.svg)### 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.
![](/examples/dot-grids.svg)### Large Nodes
```.---. .-. .-. .-. .-.
| A +----->| 1 +<---->| 2 |<----+ 4 +------------------. | 8 |
'---' '-' '+' '-' | '-'
| ^ | ^
v | v |
.-. .-+-. .-. .-+-. .-. .+. .---.
| 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D |
'-' '---' '-' '---' '-' '-' '---'```
![](/examples/large-nodes.svg)### Small Grids
```
___ ___ .---+---+---+---+---. .---+---+---+---.
___/ \___/ \ | | | | | | / \ / \ / \ / \ /
/ \___/ \___/ +---+---+---+---+---+ +---+---+---+---+
\___/ b \___/ \ | | | b | | | \ / \a/ \b/ \ / \
/ a \___/ \___/ +---+---+---+---+---+ +---+---+---+---+
\___/ \___/ \ | | a | | | | / \ / \ / \ / \ /
\___/ \___/ '---+---+---+---+---' '---+---+---+---'.---. .---. +--+ +-+ +-+ .-. .--. .-. +-+ +--+ .-. .--.
| | | | | | | | | | | | | | | | | | | | | | | |
+---+ +---+ +--+ +-+ | | | | | | | | +-+ +--+ '-' '--'
| +---+ | | | | | | | | | | | | |
+---+ b +---+ +--+ +-+ | | | | | | | |
| a +---+ | | | | | | | | | | | | |
'---' '---' +--+ +-+ +-+ '-' '--' '-'+---+ .---. .---.
| B | | E | | F |
+---+ '---' '---'
.---. +---+ .---.
| D | | G | | H |
'---' +---+ '---'
0123456789012345678901232Not Supported:
.---+---+---.
+---+ .-. .-. 0 | | a | | b |
| A | | A | | B | 1 +++ +--++-+-++--+
+---+ '-' '-' 2 | | | | | | |
+---+ .-. .-. 3 +-+ +--++-+-++--+
| C | | C | | D | 4 | | | | | |
+---+ '-' '-' 5 +++ '---+---+---'
0123434567890123456 |```
![](/examples/small-grids.svg)### Big Grids
```
.----. .----.
/ \ / \ .-----+-----+-----.
+ +----+ +----. | | | | .-----+-----+-----+-----+
\ / \ / \ | | | | / / / / /
+----+ B +----+ + +-----+-----+-----+ +-----+-----+-----+-----+
/ \ / \ / | | | | / / / / /
+ A +----+ +----+ | | B | | +-----+-----+-----+-----+
\ / \ / \ +-----+-----+-----+ / / A / B / /
'----+ +----+ + | | | | +-----+-----+-----+-----+
\ / \ / | A | | | / / / / /
'----' '----' '-----+-----+-----' '-----+-----+-----+-----+```
![](/examples/big-grids.svg)### 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. ---```
![](/examples/complicated.svg)### More examples are [here](examples)
## 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](http://casual-effects.com/markdeep/).A nicely formatted reference may be found at [pkg.go.dev](https://pkg.go.dev/github.com/blampe/goat).
### Installation
```
$ go get -u github.com/blampe/goat/
```
### Library Data Flow
![](/goat.svg)The diagram above was derived by [./pre-push.sh](./pre-push.sh) from ASCII-art in the Go
source file [./goat.go](./goat.go).#### Auto-formatted API docs
### 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.[@bep]: https://github.com/bep/goat/
[@dmacvicar]: https://github.com/dmacvicar/goat
[@sw46]: https://github.com/sw46/goat/
[SVG]: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
[markdeep.mini.js]: http://casual-effects.com/markdeep/
[v0.93.0]: https://github.com/gohugoio/hugo/releases/tag/v0.93.0