Typograms: A definition and renderer for ASCII diagrams

Re:Typograms: A definition and renderer for ASCII diagrams by minhmeoke on Tuesday August 08, 2023 @04:14PM (#37054871)

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.

[ Parent | on HN ]

Re:Typograms: A definition and renderer for ASCII diagrams by kiitos on Tuesday August 08, 2023 @10:30PM (#37058060)

But like, why not just use that ASCII sequence diagram directly?

    Renderer               Browser        Network
    ========               =======        =======
    | BeginNavigation      |              |  
    |--------------------->|              |  
    |                      | URLRequest   |
    |                      |------------->|
    |                      |              |
    |                      |  URLResponse |
    |                      |<-------------|
    |                      |
    |     CommitNavigation |
    |<---------------------|
    |                      |
    | DidCommitNavigation  |
    |--------------------->|
    |

This took me like 45 seconds to produce in Visual Studio Code.

[ Parent | on HN ]