A mind map maker example pairs one plain-text outline with one deterministic SVG diagram where the first nonempty line is the root node, each pair of leading spaces (or single tab) adds one nesting level, and every indented line connects to the nearest preceding node one level shallower. The Mind Map Maker turns that outline into a left-to-right tree in the browser: rows follow the original outline order, depth shifts nodes right by a fixed column distance, and cubic SVG paths connect parent boxes to child boxes. The parser caps at 80 nonempty nodes and 120 characters per label, accepts up to 12,000 characters of outline text, and refuses mixed-indent prefixes or skipped levels so a malformed outline cannot silently attach to the wrong branch. Every label is XML-escaped before it reaches the SVG, so ampersands, angle brackets, quotes, and apostrophes render as characters rather than markup. The downloaded file contains only rectangles, paths, and text — no scripts, foreignObject elements, external images, or remote references.
The point of looking at an example is rarely the diagram itself. It is the input-to-output mapping: which characters in the outline become boxes, where each box sits, and which lines the parser will refuse. Once that mapping is visible, the example doubles as a template you can adapt for project planning, study notes, or competitive analysis without re-reading the rules.
Anatomy of a Mind Map Maker Example
Every example produced by this tool has three parts that always appear in the same order:
- The outline text. A plain-text block where the first nonempty line is the root and each subsequent line's leading whitespace sets its depth. Blank lines are ignored, and line endings are normalized locally so the same outline behaves the same way on Windows, macOS, or Linux.
- The local preview. An SVG rendered inside the browser tab from a revocable Blob URL. The preview is rebuilt every time you regenerate, so editing the outline immediately invalidates the previous preview and releases its URL.
- The downloaded SVG. A standalone vector file with the same layout as the preview, saved with a .svg extension and safe to open in a browser, paste into a document, or attach to a message.
Two facts about this anatomy matter when you compare examples. First, nothing is uploaded — parsing, layout, preview, and download all happen in the current browser tab, so the outline never leaves the machine it was typed on. Second, the layout is deterministic: the same outline text always produces the same node positions and the same cubic paths, which makes the output easy to test and easy to diff if a teammate regenerates it independently.
A Sample Project Outline and Its Diagram
Consider this outline for a small product launch:
Product Launch Q3 Goals Revenue target User signups Press mentions Channels Email Social Partnerships Risks Slip in engineering Compliance review delay
Pasted into the Mind Map Maker with the default settings, this outline produces a left-to-right diagram with one root box ("Product Launch Q3"), three level-1 child boxes ("Goals", "Channels", "Risks"), and eight level-2 grandchild boxes attached to their nearest level-1 parent. "Goals" receives "Revenue target", "User signups", and "Press mentions" in source order; "Channels" receives "Email", "Social", and "Partnerships"; "Risks" receives "Slip in engineering" and "Compliance review delay". Because the example stops at level 2, no deeper nodes appear and the canvas height is driven entirely by the count of level-1 and level-2 nodes.
Two small adjustments make the same example noticeably more useful. Adding a one-tab indent to each channel's tactics (so "Newsletter" sits under "Email", "Onboarding sequence" sits under "Email", and so on) extends the tree one level rightward without changing any level-1 placement. Adding a hyphen, asterisk, or plus in front of any label is harmless — the parser strips those bullets after it has read the indentation, so "- Revenue target" and "Revenue target" produce the same node.
How to Replicate the Example
- Paste the outline. Open the Mind Map Maker, paste the product-launch outline above into the text area, and confirm the first nonempty line ("Product Launch Q3") is flush left with no leading whitespace.
- Check the indentation. Verify that each level-2 line has exactly two leading spaces and each level-3 line has exactly four (or one and two tabs respectively), and that no indentation prefix mixes tabs and spaces.
- Select Generate mind map. Click the generate control. The preview appears immediately on the same page, drawn from a local Blob URL, with cubic paths joining each parent box to each child box.
- Inspect the parent-child connections. In the preview, trace each level-1 box back to "Product Launch Q3" and each level-2 box back to its level-1 parent. Because skipped indents and mixed-indent prefixes are rejected outright, a malformed outline produces no diagram — fix the spacing and regenerate.
- Download the SVG. Use the download control to save the standalone SVG. Open it in a browser tab to confirm the layout matches the preview; the file contains no scripts, fonts, or remote references.
- Keep the outline. Leave the original outline in a text file beside the SVG. When the structure changes, edit the text and regenerate — much faster than redrawing the diagram by hand.
Output Rules the Example Demonstrates
The product-launch outline is short enough to read every rule at a glance. The same rules govern any outline up to the parser's hard limits.
| Outline element | How the example treats it |
|---|---|
| First nonempty line | Becomes the root node ("Product Launch Q3"). The parser rejects any leading whitespace on the first line. |
| Two leading spaces | Adds one nesting level, so "Revenue target" sits one level deeper than "Goals". |
| One tab | Adds the same one nesting level. The same prefix cannot mix a tab and spaces. |
| Skipped level | Outright rejected. A level-3-indent line under a level-1 parent will not generate. |
| Leading hyphen, asterisk, or plus | Stripped from the label after the indentation has been read, so bullets are decorative only. |
| Blank lines | Ignored entirely, so you can visually group sections in the source. |
| Characters such as &, <, >, ", ' | XML-escaped before they enter the SVG, so they render as plain text rather than as markup. |
| Outline length | Capped at 12,000 characters total and 80 nonempty nodes. |
| Label length | Capped at 120 characters. |
Two more behaviors are worth knowing because they shape what a downloaded SVG looks like. Node positions follow depth and source order rather than a force-directed layout, so an outline with a wide top branch and a single deep tail always reads top-to-bottom in outline order rather than being rebalanced. The SVG canvas expands to include every generated node, so the exported file is one self-contained image — useful as a planning artifact and unsuitable as a project file you intend to round-trip back into an outline.
When This Kind of Example Is the Right Fit
The Mind Map Maker example pattern is the right choice when the source is already text-shaped and the goal is a clean, shareable diagram. A meeting agenda, a chapter outline, a competitive landscape, or a risk register can be re-indented into the tool in under a minute, and the resulting SVG is portable enough to drop into a slide deck, a wiki page, or an email. The same outline also doubles as documentation: a teammate can read the indented text and picture the diagram without opening the SVG.
It is the wrong choice when the diagram is the source of truth. The exported SVG is a presentation artifact, not a round-trip project file, so there is no node-dragging, no collapsing branches, and no import path back into the outline. For freeform spatial editing, persistent projects, accessible semantic documents, or collaborative real-time mapping, a dedicated diagramming application is the better fit. Treat the outline as the editable source and the SVG as the rendered output, and the tool stays in the role it was designed for: a fast, local bridge from text to diagram.
For a deeper dive into the syntax and a printable summary of the limits, the Mind Map Maker cheat sheet on syntax, limits, and SVG output collects the same rules in reference form. The standalone vector format itself is documented at the MDN SVG tutorial, which is a useful reference for anyone who wants to understand why the downloaded file opens cleanly in any modern browser without external dependencies.
For a deeper look, see Pie Chart Maker Cheat Sheet: Format, Tips, and Limits.