dev.to articles mindmap

It’s hard to get used to the speed at which #KnowsEverythingBetter accelerates production beyond its once-human pace.

Back when I wrote Single line CV, I already had the idea of automating how the connections between my published articles are visualized. It was a struggle back then, but now, with Claude/design, an interactive map of those connections came together very quickly.

You can try it yourself with the prompt below, though you’ll need an entry-level Claude subscription.

Deep Dive into my article chaos

Use arrow button for quick navigation experience!

Pengeszikra / devto-post-map

Interactive Mind Map for my dev.to articles created by Claude Design

dev.to/pengeszikra :: post map

An interactive mind map of every post on dev.to/pengeszikra, from Aug 2020 to Oct 31, 2026, showing why each post connects to the others.

→ Open the interactive map

• 51 posts in 8 threads, with 62 connections
• Solid line: the post links or cites the other one. Dashed line: inferred.
• Click a post, or move with ← ↑ → ↓, to see its 3-sentence summary and the reason for each connection.
• index.html is a single self-contained file: pure HTML, no build step.

View on GitHub

# Prompt: build an interactive mind map of my dev.to posts

Replace `<USERNAME>` with your dev.to handle and paste the prompt into a new chat.

---

Build an interactive mind map of **every post** on **https://dev.to/<USERNAME>**, including the newest one. The goal is to show **why** each post connects to the others, not just to list them.

## 1. Research
- Fetch my dev.to profile and collect every post: title, slug/URL, date, tags and reaction count.
- The profile page may be cached and miss the newest posts. Check the "More from <USERNAME>" links at the bottom of the most recent articles until no new titles appear.
- Read as many posts in full as you can, at least the most recent ones and the most-linked ones. Note every link a post makes to my other posts.

## 2. Structure
- Group the posts into **6–8 thematic threads** (hubs) based on content, not just tags. Give each thread a short name and a one-sentence description.
- Pick **one root post**: the one that best summarises me, or that the most other posts link back to. Put it in the centre.
- Write down every connection between two posts with a **one-sentence reason**, and sort each connection into one of two kinds:
  - **explicit**: I linked or cited the other post, it is a numbered part of the same series, or it continues the same project.
  - **inferred**: the connection is your interpretation (same idea, same motif, a sequel in spirit).
  Never present an inferred connection as explicit.
- Write a **3-sentence summary** for every post. Mark whether each summary comes from the full article or only from the title, tags and linking posts.

## 3. Interactive map (single page)
- Layout: the root in the centre, thread hubs on the left and right, and post cards in a column beside their hub. Draw the tree as curved branches. Draw connections as curves between cards: solid for explicit, dashed for inferred.
- Colour: give each thread one colour on a dark background. Use small, quiet type. Keep the header to one line: `DEV.TO/<USERNAME> :: POST MAP · <first date> – <last date>`, plus zoom − / fit / +.
- Click a post to highlight it, its thread and its connected posts, and dim everything else. Show numbered badges on the highlighted connection lines.
- Side panel:
  - Post selected: thread, title, date, tags, reactions, the 3-sentence summary, a "Read on dev.to ↗" link, and a numbered list of connections, each with its reason and the label "you linked it" or "inferred". Clicking a listed connection selects that post.
  - Thread selected: its description and its posts, oldest first.
  - Nothing selected: an overview of all threads.
- Keyboard: the arrow keys move to the nearest node in that direction, and the view scrolls to keep it visible. Esc returns to the overview.
- Settings: show or hide the inferred links and the tree branches.

## 4. GitHub export
- `index.html`: the interactive map as one self-contained, offline file, for GitHub Pages.
- `mindmap.svg`: a static version where every post card is an `<a>` link to its article and every connection line has a `<title>` tooltip with its reason. Use system fonts and hex colours so GitHub renders it correctly.
- `README.md`: the SVG as an image, linked to the Pages URL, plus a short description.
- Package these three files as a downloadable `repo/` folder, and tell me the git commands to push it and turn on Pages.

## Rules
- Use only real data from my profile and articles. If something is unknown (such as the reactions on a very new post), leave it empty.
- Be clear about which posts you read in full and which you didn't.
- Write in English unless I ask otherwise.

THX-2-READ!