Diagram Workshop

Paste text on the left and get a diagram on the right: lecture notes and meeting minutes become clear, structured mind maps.

Loading preview...
Start with this prompt

Paste text on the left and get a diagram on the right: lecture notes and meeting minutes become clear, structured mind maps.

Try Websites Agent
Build a text-to-diagram workshop called Diagram Workshop: document in, structured diagram out. The visitor pastes lecture notes, meeting minutes or a product document into the left panel, and a structured diagram is generated on the right, ready to read and refine. The notation stays simple enough to learn in a minute: indentation marks hierarchy, and designated symbols mark the flow direction between nodes and attach annotations to them. Three examples are built in for a quick start, a retrieval-augmented generation system with its five stages of data preparation, index building, retrieval, generation and evaluation, a requirements review process, and a company org chart, and a file can be imported with one click instead of pasting, so an existing document becomes a diagram directly without retyping. Every node in the diagram can be expanded and collapsed to read the structure at different depths. The layout keeps a clean white engineering-drawing style. Single-file static page.
Export diagram as PNG

The diagram generated on the right can now be exported as a PNG image with one click; text-to-diagram parsing and node expand and collapse work as before.

Try Websites Agent
Build a text-to-diagram workshop called Diagram Workshop: document in, structured diagram out. The visitor pastes lecture notes, meeting minutes or a product document into the left panel, and a structured diagram is generated on the right, ready to read and refine. The notation stays simple enough to learn in a minute: indentation marks hierarchy, and designated symbols mark the flow direction between nodes and attach annotations to them. Three examples are built in for a quick start, a retrieval-augmented generation system with its five stages of data preparation, index building, retrieval, generation and evaluation, a requirements review process, and a company org chart, and a file can be imported with one click instead of pasting, so an existing document becomes a diagram directly without retyping. Every node in the diagram can be expanded and collapsed to read the structure at different depths. The layout keeps a clean white engineering-drawing style. Single-file static page.
Switch to blackboard style

Switches the white engineering-drawing look for a dark blackboard chalk style, while the parsing rules and the built-in example library stay exactly the same.

Try Websites Agent
Build a text-to-diagram workshop called Diagram Workshop: document in, structured diagram out. The visitor pastes lecture notes, meeting minutes or a product document into the left panel, and a structured diagram is generated on the right, ready to read and refine. The notation stays simple enough to learn in a minute: indentation marks hierarchy, and designated symbols mark the flow direction between nodes and attach annotations to them. Three examples are built in for a quick start, a retrieval-augmented generation system with its five stages of data preparation, index building, retrieval, generation and evaluation, a requirements review process, and a company org chart, and a file can be imported with one click instead of pasting, so an existing document becomes a diagram directly without retyping. Every node in the diagram can be expanded and collapsed to read the structure at different depths. The layout keeps a clean white engineering-drawing style. Single-file static page.
Add a schedule example

The example library gains a fourth entry, a project schedule timeline, alongside the retrieval-augmented generation system, the requirements review process and the company org chart.

Try Websites Agent
Build a text-to-diagram workshop called Diagram Workshop: document in, structured diagram out. The visitor pastes lecture notes, meeting minutes or a product document into the left panel, and a structured diagram is generated on the right, ready to read and refine. The notation stays simple enough to learn in a minute: indentation marks hierarchy, and designated symbols mark the flow direction between nodes and attach annotations to them. Three examples are built in for a quick start, a retrieval-augmented generation system with its five stages of data preparation, index building, retrieval, generation and evaluation, a requirements review process, and a company org chart, and a file can be imported with one click instead of pasting, so an existing document becomes a diagram directly without retyping. Every node in the diagram can be expanded and collapsed to read the structure at different depths. The layout keeps a clean white engineering-drawing style. Single-file static page.