weidagang/text-diagram — reverse-engineered prompt

Build me a simple browser based tool where I can type a plain text script and instantly see it rendered as a UML style sequence diagram. I want it to feel lightweight and easy to use, basically a text editor on one side and a live diagram preview on the other.

It should understand a small readable syntax like listing the participant names first, then messages from one person to another with a label, notes on the left or right of a person, extra blank spacing lines, and line breaks inside message text. Render the participants across the top with lifelines, arrows between them, and note boxes in the right places, similar to classic text diagrams.

Please include a starter example in the editor so someone can try it right away, and make the whole thing work fully in the browser without needing a server. Keep it clean and easy to tweak. If anything about the expected syntax is unclear, check the existing demo or README online.