from Hacker News

Typograms: A definition and renderer for ASCII diagrams

by sgoto on 8/7/23, 8:59 PM with 58 comments

  • by chrismorgan on 8/8/23, 1:19 PM

    > 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...>.)

  • by CRConrad on 8/21/23, 7:55 PM

    So this is basically just what we used to do in IBM Extended ASCII like thirty-five (forty?) years ago, only slightly expanded because Unicode has more characters than Codepage... Uh, 472? 185? I forget. But anyway, wow: So much time, so little progress.

  • by jph on 8/8/23, 2:09 PM

    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/

  • by sgoto on 8/7/23, 8:59 PM

    Previously submitted in personal repo:

    https://news.ycombinator.com/item?id=32133345

    Now, officially open sourced:

    https://github.com/google/typograms

  • by minhmeoke on 8/8/23, 8:14 PM

    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.

  • by akavel on 8/8/23, 4:42 PM

    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)

  • by johnnyworker on 8/8/23, 12:57 PM

    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.

  • by layer8 on 8/8/23, 3:13 PM

  • by AndrewThrowaway on 8/8/23, 12:40 PM

    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?

  • by Cockbrand on 8/8/23, 1:07 PM

    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.

  • by lachlan_gray on 8/8/23, 12:35 PM

    This would combine really nicely with virtualedit=true in vim

  • by kiitos on 8/8/23, 10:52 PM

    ASCII diagrams can easily be drawn and maintained directly. That's kind of the whole point! Generating them from some more primitive declaration language makes them harder to use, not easier. This kind of tool is frustrating.

  • by lionkor on 8/8/23, 3:39 PM

    Text clips on the top side on firefox android, which is quite embarrassing

  • by badcppdev on 8/8/23, 3:34 PM

    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

  • by mdtrooper on 8/8/23, 1:55 PM

    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...

  • by culi on 8/8/23, 8:27 PM

    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

  • by avgcorrection on 8/8/23, 1:55 PM

    > 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?

  • by dolmen on 8/8/23, 3:02 PM

    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

  • by worthless-trash on 8/8/23, 2:15 PM

    Its amazing, we can have thousands of emoticons, but not the more complex ascii to use for boxes.

  • by blondin on 8/8/23, 6:31 PM

    how would you export something like this to an image? and also, would this work in github markdown?