<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Phuong Truong</title>
    <description>The latest articles on DEV Community by Phuong Truong (@mphuongth).</description>
    <link>https://dev.to/mphuongth</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4038273%2F699b881c-4bff-4a48-b272-3789cbd7ba8c.jpg</url>
      <title>DEV Community: Phuong Truong</title>
      <link>https://dev.to/mphuongth</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mphuongth"/>
    <language>en</language>
    <item>
      <title>I made a small Markdown mindmap tool for brainstorms (yes, another one)</title>
      <dc:creator>Phuong Truong</dc:creator>
      <pubDate>Mon, 20 Jul 2026 13:42:28 +0000</pubDate>
      <link>https://dev.to/mphuongth/i-made-a-small-markdown-mindmap-tool-for-brainstorms-yes-another-one-37a6</link>
      <guid>https://dev.to/mphuongth/i-made-a-small-markdown-mindmap-tool-for-brainstorms-yes-another-one-37a6</guid>
      <description>&lt;p&gt;I'll be upfront: this is not a groundbreaking idea. &lt;a href="https://markmap.js.org/" rel="noopener noreferrer"&gt;Markmap&lt;/a&gt; already turns Markdown into a mindmap, it's excellent, and most people should just use it.&lt;/p&gt;

&lt;p&gt;I built &lt;strong&gt;&lt;a href="https://mphuongth.github.io/md2mindmap/" rel="noopener noreferrer"&gt;md2mindmap&lt;/a&gt;&lt;/strong&gt; anyway, because I kept wanting a &lt;em&gt;slightly different&lt;/em&gt; thing for my planning notes — and it was a fun weekend-ish project. Sharing it here in case that "slightly different" happens to be what someone else wants too.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fawhi5v4efwgrqnsbdhel.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fawhi5v4efwgrqnsbdhel.gif" alt="Typing a Markdown outline while the mindmap redraws live" width="800" height="451"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I wanted that was a little different
&lt;/h2&gt;

&lt;p&gt;Most Markdown mindmap tools grow the tree in one direction. I wanted:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A &lt;strong&gt;balanced, left/right layout&lt;/strong&gt; (the Miro / MindNode look), which reads better for a wide brainstorm.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;Q:&lt;/code&gt; questions as first-class citizens&lt;/strong&gt; — I write a lot of open questions while planning, so any line starting with &lt;code&gt;Q:&lt;/code&gt; turns red.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Task checkboxes&lt;/strong&gt; — &lt;code&gt;- [ ]&lt;/code&gt; / &lt;code&gt;- [x]&lt;/code&gt; become ☐ / ☑ nodes, with a &lt;code&gt;done / total&lt;/code&gt; count.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So this outline:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# Checkout redesign&lt;/span&gt;
&lt;span class="p"&gt;-&lt;/span&gt; Cart
&lt;span class="p"&gt;  -&lt;/span&gt; [x] Line-item edit
&lt;span class="p"&gt;  -&lt;/span&gt; [ ] Save for later
&lt;span class="p"&gt;  -&lt;/span&gt; Q: guest checkout in v1?
&lt;span class="p"&gt;-&lt;/span&gt; Payment
&lt;span class="p"&gt;  -&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;Stripe docs&lt;/span&gt;&lt;span class="p"&gt;](&lt;/span&gt;&lt;span class="sx"&gt;https://stripe.com/docs&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;  -&lt;/span&gt; Q: which wallets at launch?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;…renders like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frl7aouhnk26znbc9pnep.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Frl7aouhnk26znbc9pnep.png" alt="Tasks as checkboxes, links underlined, Q: lines in red" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  It also does the boring-but-useful stuff
&lt;/h2&gt;

&lt;p&gt;Share a link that reopens the exact outline (the Markdown is compressed into the URL — no server, nothing stored), and export to PNG / SVG or copy the image to your clipboard:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqzofcfbg8reyrvsdnzy4.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqzofcfbg8reyrvsdnzy4.gif" alt="Exporting the map and copying a share link" width="800" height="388"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Where it came from
&lt;/h2&gt;

&lt;p&gt;It started as one page inside a little Business Analyst workflow I was tinkering with — the step that dumps a brainstorm as a Markdown outline. I wanted to &lt;em&gt;see&lt;/em&gt; that outline as a map, so I wrote a small renderer, and eventually pulled it out into its own thing.&lt;/p&gt;

&lt;h2&gt;
  
  
  The nerdy bit (why it's tiny)
&lt;/h2&gt;

&lt;p&gt;The whole thing is &lt;strong&gt;zero-dependency&lt;/strong&gt;: open &lt;code&gt;index.html&lt;/code&gt; and it runs. No build, no framework.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Parser + layout + SVG rendering live in one ~500-line vanilla JS module.&lt;/li&gt;
&lt;li&gt;Sharing uses the browser's native &lt;code&gt;CompressionStream&lt;/code&gt; to pack the Markdown into the URL hash — no backend.&lt;/li&gt;
&lt;li&gt;Export rasterizes the SVG through a &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt;; PNG copy uses the Clipboard API.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There's also a small VS Code extension that previews the active &lt;code&gt;.md&lt;/code&gt; beside your editor, with a "List Open Questions" command that jumps to every &lt;code&gt;Q:&lt;/code&gt; in the file.&lt;/p&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Try it (no install):&lt;/strong&gt; &lt;a href="https://mphuongth.github.io/md2mindmap/" rel="noopener noreferrer"&gt;https://mphuongth.github.io/md2mindmap/&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Source (MIT):&lt;/strong&gt; &lt;a href="https://github.com/mphuongth/md2mindmap" rel="noopener noreferrer"&gt;https://github.com/mphuongth/md2mindmap&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;VS Code extension (.vsix):&lt;/strong&gt; &lt;a href="https://github.com/mphuongth/md2mindmap/releases/latest" rel="noopener noreferrer"&gt;https://github.com/mphuongth/md2mindmap/releases/latest&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That's it — it's a small tool, not a Markmap replacement. If you try it and something feels off (or you wish it did X), I'd genuinely like to hear it. Thanks for reading 🙂&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>markdown</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
