[HN Gopher] Typograms: A definition and renderer for ASCII diagrams
___________________________________________________________________
Typograms: A definition and renderer for ASCII diagrams
Author : sgoto
Score : 139 points
Date : 2023-08-07 20:59 UTC (1 days ago)
(HTM) web link (google.github.io)
(TXT) w3m dump (google.github.io)
| johnnyworker wrote:
| As someone who is heavily biased against anything Google, the
| "related work" paragraph positively surprised me. I wish more
| software authors would point out alternatives in what I can only
| describe as a user friendly and generous manner.
| spankalee wrote:
| Google is made of people and Sam is a delightful person that
| you don't need to be "biased" against.
| johnnyworker wrote:
| Yeah, I know that wonderful individuals work there. As is
| true for Microsoft and even Facebook and so on. But I saw
| google.github and was looking for something to not like about
| it, I have to admit that, and I found nothing. Kudos and
| thanks to the author.
| lionkor wrote:
| Text clips on the top side on firefox android, which is quite
| embarrassing
| akavel wrote:
| Same in desktop version of Firefox.
|
| Also, the examples in the last 3 sections in "Scribbles" ( _"
| Small curved steps", "Parenthesis and spheres", "Diagonal Side-
| way Arrows"_) don't seem to actually render anything
| interesting, just showing what is presumably the original
| ASCII-Art behind them. I'm confused if that's what was intended
| there, or something is broken (?)
|
| _edit:_ The whole situation is even weirder given that half of
| the motivation claimed by the author in the "Related" section
| is apparently specifically: _" ran into enough challenges with
| [...] the text rendering [in svgbob ...] that motivated me to
| rewrite it in JS (svgbob is written in rust)"_. I mentioned my
| confusion about relation to svgbob in a top-level comment here,
| but the quote above makes it even weirder to have Typograms
| actually render text poorly (in Firefox)... and the jokes and
| tropes just seem to want to write themselves here, whether
| about rewriting Rust in JS, or about Google ignoring Firefox...
| kiitos wrote:
| ASCII diagrams can easily be drawn and maintained directly.
| Generating them from some more primitive declaration language
| makes them harder to use, not easier. This kind of tool is
| frustrating.
| blondin wrote:
| how would you export something like this to an image? and also,
| would this work in github markdown?
| culi wrote:
| shameless self plug of my very small collection of ascii data viz
| libraries
|
| https://ascii.dataviz.gallery/
|
| planning to grow it soon with a more thorough breakdown of what
| libraries are available for what programming languages
| AndrewThrowaway wrote:
| So how do I easily draw? I can see potential to use it in
| documentation and etc but how do I create e.g. mock? Just typing
| all the symbols I need to remember?
| kordlessagain wrote:
| Or have an LLM do it after indexing the project.
| [deleted]
| jph wrote:
| Typograms could be great with the monodraw app on macOS. I'm a
| very happy customer of monodraw-- not affiliated in any way.
|
| https://monodraw.helftone.com/
| tgrosinger wrote:
| I love Monodraw. I've been searching for a non-Mac equivalent
| for years and have so far come up empty handed.
| andytruett wrote:
| What sets Monodraw apart as compared to something like
| ASCIIFlow?
| tgrosinger wrote:
| Monodraw has an understanding of objects in an ascii
| drawing. For example, you can select a box and edit the
| properties of it, or easily move just the box and not boxes
| within it.
|
| Essentially it's a full flowchart editor that just outputs
| ascii.
| alanwreath wrote:
| It works.
|
| At least ASCII flow is very very buggy on my Mac. And I've
| attempted with many web browsers.
|
| That said, I'm hopeful that it improves its usability and
| it's pretty awesome that it is open source and can be run
| locally which reminds me of hastebin.
| ivanceras wrote:
| I'm working on it. I'm the author of svgbob, but it will take
| me awhile to polish this. https://ivanceras.github.io/bob-
| editor/
| layer8 wrote:
| Examples of actual typograms [0]: https://aaronkuehn.com/art
|
| [0] https://en.wiktionary.org/wiki/typogram
| Cockbrand wrote:
| Selecting text in the example diagrams somehow reminds me of
| Carpenter's "They Live", where the protagonist has glasses to see
| through the superficial appearance of people and billboards.
|
| That said, I haven't seen this or the mentioned related work
| before, and it's really neat how easy it is to create good
| looking and very readable diagrams with this.
| akavel wrote:
| I'm somewhat confused: the "Related" section says:
|
| _" [...] that motivated me to rewrite it [- presumably: svgbob
| -] in JS (svgbob is written in rust)" [...]"_
|
| So, is "Typograms" a modified rewrite of svgbob in JS? _IF_ yes,
| isn 't it a Derivative Work of svgbob, and (per the Apache
| License, which seems to match the one used here) shouldn't
| "Typograms" keep the mention of the original author somewhere in
| the Licensing information, and notably their original Copyright
| note? (As present e.g. in svgbob's License file.)
|
| _IF NOT_ , then why mention a "rewrite"? What is actual relation
| of Typograms to svgbob? This becomes even weirder given that some
| of the examples in the Typograms demo seem reused verbatim from
| the svgbob demo - but rendered poorer (at least on Firefox);
| making it sound like it is a rewrite also makes it sound like it
| is a - sorry for this - _crappy_ rewrite... and this under google
| 's name... but then in the end is it actually _not_ a rewrite? is
| it just a - still at first glance seemingly crappy, sorry -
| clone? (hm, at least I 'd love to show some clearly highlighted
| improvements over svgbob, maybe? if I'm not to focus on the
| somewhat-broken parts of the demo?) aaaand still under google's
| name?... reeeeaaaaaallllyyyyy wierd and confusing case to me...
| (O_o)
| paxys wrote:
| A rewrite is NOT a derivative work, as long as it is only
| copying the interfaces and not original code.
| minhmeoke wrote:
| Thank you, this looks really useful!
|
| One more ASCII-based tool that you could add into your workflow
| is https://arthursonzogni.com/Diagon/#Sequence which can be used
| to generate the ASCII that you input into Typogram.
|
| For example, input: Renderer -> Browser:
| BeginNavigation() Browser -> Network: URLRequest()
| Browser <- Network: URLResponse() Renderer <- Browser:
| CommitNavigation() Renderer -> Browser:
| DidCommitNavigation()
|
| will output the following sequence diagram:
| .--------. .-------. .-------. |Renderer|
| |Browser| |Network| '--------' '-------'
| '-------' | | |
| | BeginNavigation() | |
| |-------------------->| | |
| | | | |URLRequest()
| | | |------------>|
| | | | |
| |URLResponse()| |
| |<------------| | |
| | | CommitNavigation() | |
| |<--------------------| | |
| | | |DidCommitNavigation()|
| | |-------------------->| |
| .--------. .-------. .-------. |Renderer|
| |Browser| |Network| '--------' '-------'
| '-------'
|
| and then you can perform further edits using something like
| https://asciiflow.com/ (web, free) or
| https://ivanceras.github.io/bob-editor/ (web, free) or
| https://monodraw.helftone.com/ (Mac only, proprietary) as
| mentioned in other comments.
| dolmen wrote:
| This reminds me I still have to learn Pikchr, the diagramming
| language used to render SQLite syntax diagrams.
|
| https://pikchr.org/home/doc/trunk/homepage.md
| mdtrooper wrote:
| There is a lot of alternatives before of google, for example
| Ditaa https://github.com/stathissideris/ditaa .
|
| There is a small list (in spanish) in:
| https://tomatesasesinos.com/2020/06/11/anti-nocodetools-diag...
| avgcorrection wrote:
| > 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).
|
| How can it be both "easy to change" and not be ergonomic?
| worthless-trash wrote:
| Its amazing, we can have thousands of emoticons, but not the more
| complex ascii to use for boxes.
| badcppdev wrote:
| Cute.
|
| But if the maintainer(?) is reading these comments it looks like
| the inductor in the circuit section isn't working correctly. I
| can separate "C" characters rather than the normal circuit symbol
| chrismorgan wrote:
| > _A polyfill is available that allows you use to use it in
| browsers._
|
| This isn't a polyfill. Polyfills are about implementing new
| native stuff on old environments, but no browser is going to be
| including this any time soon, and certainly not in this form--
|
| > _< script type="text/typogram">_
|
| This should use <pre> instead, e.g. <pre class="typogram">. It's
| content, not scripting, and if the JavaScript isn't run (for
| whatever reason--JS is less reliable than people often think,
| especially third-party JS, even on environments that don't try to
| block it) you'd like the diagram to still be visible in _some_
| form.
|
| (Retaining the <pre> would also be a great improvement for
| selecting text--the current arrangement of "place single-
| character <text> elements" is almost useless for copy and paste
| (losing spaces and line breaks), which is the main reason I can
| imagine wanting such a thing. If character sizes and aspect
| ratios are a concern, control that stuff with scaling transforms
| or line-height, and detect and contain (e.g. <span
| style="overflow:visible;width:...">...</span>) individual
| characters that are falling out of the grid due to font fallback
| or bad ligatures like Nimbus Mono
| <https://github.com/ArtifexSoftware/urw-
| base35-fonts/issues/3...>.)
| Terr_ wrote:
| > if the JavaScript isn't run [...] you'd like the diagram to
| still be visible in some form.
|
| Yeah, that's one of the things that disappointed me about the
| linked page, I expected the diagrams to degrade gracefully into
| regular ASCII-art.
|
| One of the ways I could imagine using this being useful is in
| markdown documents, following the principle that the source is
| good-enough to follow even if some additional processing could
| make it better.
| sgoto wrote:
| Previously submitted in personal repo:
|
| https://news.ycombinator.com/item?id=32133345
|
| Now, officially open sourced:
|
| https://github.com/google/typograms
| lachlan_gray wrote:
| This would combine really nicely with virtualedit=true in vim
| koprulusector wrote:
| Oooohhh neat! By the way, virtualedit takes a string, can be
| block, onemore, all, or none.
___________________________________________________________________
(page generated 2023-08-08 23:02 UTC)