Node Builder | Rishi Ashar

CanvasDrag nodes or use arrow keys

Tree

Data

{
  "nodes": [
    {
      "id": "tech",
      "label": "Tech",
      "parentId": null,
      "x": 180,
      "y": 166,
      "color": "#7c4dff",
      "lightColor": "#6f35c7",
      "labelColor": "#963D97",
      "lightLabelColor": "#7c237d",
      "side": "right"
    },
    {
      "id": "ai",
      "label": "AI",
      "parentId": "tech",
      "x": 112,
      "y": 196,
      "color": "#00a6ff",
      "lightColor": "#0071e3",
      "labelColor": "#009DDC",
      "lightLabelColor": "#0071e3",
      "side": "left",
      "relatedIds": [
        "child-2-ybm1l"
      ]
    },
    {
      "id": "tools",
      "label": "Emerging New Design Tools",
      "parentId": "tech",
      "x": 286,
      "y": 90,
      "color": "#ff4fd8",
      "lightColor": "#bd2d9d",
      "labelColor": "#963D97",
      "lightLabelColor": "#7c237d",
      "side": "right",
      "relatedIds": [
        "figma-make"
      ]
    },
    {
      "id": "media",
      "label": "Media",
      "parentId": null,
      "x": 545,
      "y": 105,
      "color": "#ff4f86",
      "lightColor": "#cf2f55",
      "labelColor": "#E03A3E",
      "lightLabelColor": "#c2292e",
      "side": "left"
    },
    {
      "id": "photo",
      "label": "Photography",
      "parentId": "media",
      "x": 650,
      "y": 145,
      "color": "#17d6a5",
      "lightColor": "#148b6b",
      "labelColor": "#61BB46",
      "lightLabelColor": "#248a3d",
      "side": "right",
      "relatedIds": [
        "composition",
        "lighting",
        "visual-systems"
      ]
    },
    {
      "id": "design",
      "label": "Design",
      "parentId": null,
      "x": 610,
      "y": 365,
      "color": "#ff3f78",
      "lightColor": "#d83566",
      "labelColor": "#F5821F",
      "lightLabelColor": "#c75f00",
      "side": "left",
      "relatedIds": [
        "visual-systems"
      ]
    },
    {
      "id": "ux",
      "label": "UX",
      "parentId": "design",
      "x": 652,
      "y": 288,
      "color": "#ffd23f",
      "lightColor": "#b18400",
      "labelColor": "#FDB827",
      "lightLabelColor": "#9f7200",
      "side": "right",
      "relatedIds": [
        "design-systems",
        "interaction-design",
        "product-strategy"
      ]
    },
    {
      "id": "motion",
      "label": "Motion",
      "parentId": "design",
      "x": 664,
      "y": 402,
      "color": "#45a7ff",
      "lightColor": "#1769aa",
      "labelColor": "#009DDC",
      "lightLabelColor": "#0071e3",
      "side": "right",
      "relatedIds": [
        "interaction-design"
      ]
    },
    {
      "id": "culture",
      "label": "Culture",
      "parentId": null,
      "x": 218,
      "y": 454,
      "color": "#22c96b",
      "lightColor": "#248a3d",
      "labelColor": "#61BB46",
      "lightLabelColor": "#248a3d",
      "side": "left"
    },
    {
      "id": "rap",
      "label": "Exploring New Cultures",
      "parentId": "culture",
      "x": 112,
      "y": 480,
      "color": "#ff4b4b",
      "lightColor": "#c73636",
      "labelColor": "#E03A3E",
      "lightLabelColor": "#c2292e",
      "side": "left",
      "relatedIds": [
        "hip-hop"
      ]
    },
    {
      "id": "stories",
      "label": "Stories",
      "parentId": "culture",
      "x": 210,
      "y": 526,
      "color": "#9b5cff",
      "lightColor": "#7f35b2",
      "labelColor": "#963D97",
      "lightLabelColor": "#7c237d",
      "side": "right",
      "relatedIds": [
        "hip-hop",
        "narrative-design"
      ]
    },
    {
      "id": "economy",
      "label": "Economy",
      "parentId": null,
      "x": 146,
      "y": 344,
      "color": "#1294f6",
      "lightColor": "#0071e3",
      "labelColor": "#009DDC",
      "lightLabelColor": "#0071e3",
      "side": "right",
      "relatedIds": [
        "child-3-g01mm",
        "startups"
      ]
    },
    {
      "id": "markets",
      "label": "Markets",
      "parentId": "economy",
      "x": 70,
      "y": 310,
      "color": "#19b7ff",
      "lightColor": "#007fa8",
      "labelColor": "#009DDC",
      "lightLabelColor": "#0071e3",
      "side": "left",
      "relatedIds": [
        "child-3-g01mm",
        "startups"
      ]
    },
    {
      "id": "signals",
      "label": "Signals",
      "parentId": "economy",
      "x": 76,
      "y": 392,
      "color": "#40d19b",
      "lightColor": "#2f7f58",
      "labelColor": "#61BB46",
      "lightLabelColor": "#248a3d",
      "side": "left",
      "relatedIds": [
        "child-3-g01mm",
        "product-strategy"
      ]
    },
    {
      "id": "child-1-hank1",
      "label": "Machine Learning",
      "parentId": "ai",
      "x": 110,
      "y": 132,
      "color": "#ff4f86",
      "lightColor": "#ff4f86",
      "labelColor": "#ff4f86",
      "lightLabelColor": "#ff4f86",
      "side": "left",
      "relatedIds": [
        "child-2-ybm1l"
      ]
    },
    {
      "id": "child-2-b90qa",
      "label": "Vibe Coding",
      "parentId": "ai",
      "x": 90,
      "y": 232,
      "color": "#ff914d",
      "lightColor": "#ff914d",
      "labelColor": "#ff914d",
      "lightLabelColor": "#ff914d",
      "side": "left",
      "relatedIds": [
        "ai-agents",
        "cursor",
        "prompt-engineering"
      ]
    },
    {
      "id": "child-1-h1in5",
      "label": "Paper.design",
      "parentId": "tools",
      "x": 306,
      "y": 112,
      "color": "#ffd23f",
      "lightColor": "#ffd23f",
      "labelColor": "#ffd23f",
      "lightLabelColor": "#ffd23f",
      "side": "right"
    },
    {
      "id": "child-3-ruxf9",
      "label": "Design engineering",
      "parentId": "tech",
      "x": 136,
      "y": 104,
      "color": "#22c96b",
      "lightColor": "#22c96b",
      "labelColor": "#22c96b",
      "lightLabelColor": "#22c96b",
      "side": "right",
      "relatedIds": [
        "child-1-l51hp",
        "child-2-lcn0r",
        "child-4-q9eho",
        "design-systems"
      ]
    },
    {
      "id": "child-2-xxf6n",
      "label": "Magicpath Ai",
      "parentId": "tools",
      "x": 256,
      "y": 60,
      "color": "#17d6a5",
      "lightColor": "#17d6a5",
      "labelColor": "#17d6a5",
      "lightLabelColor": "#17d6a5",
      "side": "left"
    },
    {
      "id": "child-1-l51hp",
      "label": "Next Js",
      "parentId": "child-3-ruxf9",
      "x": 82,
      "y": 90,
      "color": "#00a6ff",
      "lightColor": "#00a6ff",
      "labelColor": "#00a6ff",
      "lightLabelColor": "#00a6ff",
      "side": "left",
      "relatedIds": [
        "child-3-ruxf9",
        "cursor",
        "framer-motion"
      ]
    },
    {
      "id": "child-2-lcn0r",
      "label": "Svg Animations",
      "parentId": "child-3-ruxf9",
      "x": 136,
      "y": 50,
      "color": "#7c4dff",
      "lightColor": "#7c4dff",
      "labelColor": "#7c4dff",
      "lightLabelColor": "#7c4dff",
      "side": "left",
      "relatedIds": [
        "child-3-ruxf9",
        "microinteractions"
      ]
    },
    {
      "id": "child-1-3wt16",
      "label": "Using Skills in Coding Agents",
      "parentId": "child-2-b90qa",
      "x": 50,
      "y": 285,
      "color": "#ff4fd8",
      "lightColor": "#ff4fd8",
      "labelColor": "#ff4fd8",
      "lightLabelColor": "#ff4fd8",
      "side": "left",
      "relatedIds": [
        "ai-agents",
        "context-engineering"
      ]
    },
    {
      "id": "child-2-hm8em",
      "label": "Youtube",
      "parentId": "media",
      "x": 510,
      "y": 80,
      "color": "#ff4f86",
      "lightColor": "#ff4f86",
      "labelColor": "#ff4f86",
      "lightLabelColor": "#ff4f86",
      "side": "left",
      "relatedIds": [
        "narrative-design"
      ]
    },
    {
      "id": "child-1-hnk16",
      "label": "Business Case Studies",
      "parentId": "child-2-hm8em",
      "x": 626,
      "y": 42,
      "color": "#ff914d",
      "lightColor": "#ff914d",
      "labelColor": "#ff914d",
      "lightLabelColor": "#ff914d",
      "side": "left",
      "relatedIds": [
        "child-3-g01mm",
        "narrative-design",
        "startups"
      ]
    },
    {
      "id": "child-2-mmf4a",
      "label": "Conspiracy Theories",
      "parentId": "child-2-hm8em",
      "x": 466,
      "y": 42,
      "color": "#ffd23f",
      "lightColor": "#ffd23f",
      "labelColor": "#ffd23f",
      "lightLabelColor": "#ffd23f",
      "side": "left"
    },
    {
      "id": "child-1-pecuq",
      "label": "Sony A 6000",
      "parentId": "photo",
      "x": 714,
      "y": 155,
      "color": "#22c96b",
      "lightColor": "#22c96b",
      "labelColor": "#22c96b",
      "lightLabelColor": "#22c96b",
      "side": "right",
      "relatedIds": [
        "lighting"
      ]
    },
    {
      "id": "child-2-lj87h",
      "label": "Video Editing",
      "parentId": "photo",
      "x": 620,
      "y": 70,
      "color": "#17d6a5",
      "lightColor": "#17d6a5",
      "labelColor": "#17d6a5",
      "lightLabelColor": "#17d6a5",
      "side": "right",
      "relatedIds": [
        "composition"
      ]
    },
    {
      "id": "child-1-68t6y",
      "label": "Exploratory User Research",
      "parentId": "ux",
      "x": 680,
      "y": 260,
      "color": "#00a6ff",
      "lightColor": "#00a6ff",
      "labelColor": "#00a6ff",
      "lightLabelColor": "#00a6ff",
      "side": "right"
    },
    {
      "id": "child-2-ybm1l",
      "label": "Generative User Research",
      "parentId": "ux",
      "x": 610,
      "y": 216,
      "color": "#7c4dff",
      "lightColor": "#7c4dff",
      "labelColor": "#7c4dff",
      "lightLabelColor": "#7c4dff",
      "side": "right",
      "relatedIds": [
        "ai",
        "child-1-hank1",
        "child-4-q9eho"
      ]
    },
    {
      "id": "child-3-f0moq",
      "label": "Testing",
      "parentId": "ux",
      "x": 720,
      "y": 340,
      "color": "#ff4fd8",
      "lightColor": "#ff4fd8",
      "labelColor": "#ff4fd8",
      "lightLabelColor": "#ff4fd8",
      "side": "right"
    },
    {
      "id": "child-4-q9eho",
      "label": "Prototyping",
      "parentId": "ux",
      "x": 704,
      "y": 316,
      "color": "#ff4f86",
      "lightColor": "#ff4f86",
      "labelColor": "#ff4f86",
      "lightLabelColor": "#ff4f86",
      "side": "left",
      "relatedIds": [
        "child-2-ybm1l",
        "child-3-ruxf9",
        "design-systems",
        "figma-make",
        "product-strategy"
      ]
    },
    {
      "id": "child-1-yqjgw",
      "label": "Rive",
      "parentId": "motion",
      "x": 690,
      "y": 526,
      "color": "#ff914d",
      "lightColor": "#ff914d",
      "labelColor": "#ff914d",
      "lightLabelColor": "#ff914d",
      "side": "right",
      "relatedIds": [
        "framer-motion",
        "microinteractions"
      ]
    },
    {
      "id": "child-2-wdhis",
      "label": "Using Tokens Effectively",
      "parentId": "child-2-b90qa",
      "x": 185,
      "y": 280,
      "color": "#7c4dff",
      "lightColor": "#7c4dff",
      "labelColor": "#7c4dff",
      "lightLabelColor": "#7c4dff",
      "side": "left",
      "relatedIds": [
        "context-engineering",
        "design-systems"
      ]
    },
    {
      "id": "child-3-d5rhm",
      "label": "Codex",
      "parentId": "child-2-b90qa",
      "x": 48,
      "y": 224,
      "color": "#ff4fd8",
      "lightColor": "#ff4fd8",
      "labelColor": "#ff4fd8",
      "lightLabelColor": "#ff4fd8",
      "side": "left",
      "relatedIds": [
        "ai-agents",
        "context-engineering",
        "cursor"
      ]
    },
    {
      "id": "child-3-g01mm",
      "label": "Geopolitics",
      "parentId": "economy",
      "x": 56,
      "y": 250,
      "color": "#ff4f86",
      "lightColor": "#ff4f86",
      "labelColor": "#ff4f86",
      "lightLabelColor": "#ff4f86",
      "side": "left",
      "relatedIds": [
        "child-1-hnk16",
        "economy",
        "markets",
        "signals"
      ]
    },
    {
      "id": "ai-agents",
      "label": "AI Agents",
      "parentId": "ai",
      "x": 52,
      "y": 106,
      "color": "#ffd23f",
      "lightColor": "#b18400",
      "labelColor": "#FDB827",
      "lightLabelColor": "#9f7200",
      "side": "left",
      "relatedIds": [
        "child-1-3wt16",
        "child-2-b90qa",
        "child-3-d5rhm",
        "llms",
        "prompt-engineering"
      ]
    },
    {
      "id": "llms",
      "label": "LLMs",
      "parentId": "child-1-hank1",
      "x": 64,
      "y": 62,
      "color": "#17d6a5",
      "lightColor": "#148b6b",
      "labelColor": "#61BB46",
      "lightLabelColor": "#248a3d",
      "side": "left",
      "relatedIds": [
        "ai-agents",
        "prompt-engineering"
      ]
    },
    {
      "id": "prompt-engineering",
      "label": "Prompt Engineering",
      "parentId": "ai",
      "x": 48,
      "y": 166,
      "color": "#ff914d",
      "lightColor": "#c75f00",
      "labelColor": "#F5821F",
      "lightLabelColor": "#c75f00",
      "side": "left",
      "relatedIds": [
        "ai-agents",
        "child-2-b90qa",
        "context-engineering",
        "llms"
      ]
    },
    {
      "id": "context-engineering",
      "label": "Context Engineering",
      "parentId": "child-2-b90qa",
      "x": 212,
      "y": 216,
      "color": "#40d19b",
      "lightColor": "#2f7f58",
      "labelColor": "#61BB46",
      "lightLabelColor": "#248a3d",
      "side": "right",
      "relatedIds": [
        "child-1-3wt16",
        "child-2-wdhis",
        "child-3-d5rhm",
        "prompt-engineering"
      ]
    },
    {
      "id": "cursor",
      "label": "Cursor",
      "parentId": "tools",
      "x": 350,
      "y": 45,
      "color": "#00a6ff",
      "lightColor": "#0071e3",
      "labelColor": "#009DDC",
      "lightLabelColor": "#0071e3",
      "side": "right",
      "relatedIds": [
        "child-1-l51hp",
        "child-2-b90qa",
        "child-3-d5rhm"
      ]
    },
    {
      "id": "figma-make",
      "label": "Figma Make",
      "parentId": "tools",
      "x": 378,
      "y": 96,
      "color": "#ff4f86",
      "lightColor": "#cf2f55",
      "labelColor": "#E03A3E",
      "lightLabelColor": "#c2292e",
      "side": "right",
      "relatedIds": [
        "child-4-q9eho",
        "design-systems",
        "tools"
      ]
    },
    {
      "id": "design-systems",
      "label": "Design Systems",
      "parentId": "design",
      "x": 552,
      "y": 320,
      "color": "#22c96b",
      "lightColor": "#248a3d",
      "labelColor": "#61BB46",
      "lightLabelColor": "#248a3d",
      "side": "left",
      "relatedIds": [
        "child-2-wdhis",
        "child-3-ruxf9",
        "child-4-q9eho",
        "figma-make",
        "ux"
      ]
    },
    {
      "id": "interaction-design",
      "label": "Interaction Design",
      "parentId": "ux",
      "x": 616,
      "y": 252,
      "color": "#ff914d",
      "lightColor": "#c75f00",
      "labelColor": "#F5821F",
      "lightLabelColor": "#c75f00",
      "side": "right",
      "relatedIds": [
        "microinteractions",
        "motion",
        "ux"
      ]
    },
    {
      "id": "visual-systems",
      "label": "Visual Systems",
      "parentId": "design",
      "x": 704,
      "y": 392,
      "color": "#7c4dff",
      "lightColor": "#6f35c7",
      "labelColor": "#963D97",
      "lightLabelColor": "#7c237d",
      "side": "right",
      "relatedIds": [
        "composition",
        "design",
        "photo"
      ]
    },
    {
      "id": "microinteractions",
      "label": "Microinteractions",
      "parentId": "motion",
      "x": 704,
      "y": 454,
      "color": "#ffd23f",
      "lightColor": "#b18400",
      "labelColor": "#FDB827",
      "lightLabelColor": "#9f7200",
      "side": "right",
      "relatedIds": [
        "child-1-yqjgw",
        "child-2-lcn0r",
        "framer-motion",
        "interaction-design"
      ]
    },
    {
      "id": "framer-motion",
      "label": "Framer Motion",
      "parentId": "motion",
      "x": 626,
      "y": 486,
      "color": "#ff4fd8",
      "lightColor": "#bd2d9d",
      "labelColor": "#963D97",
      "lightLabelColor": "#7c237d",
      "side": "left",
      "relatedIds": [
        "child-1-l51hp",
        "child-1-yqjgw",
        "microinteractions"
      ]
    },
    {
      "id": "composition",
      "label": "Composition",
      "parentId": "photo",
      "x": 714,
      "y": 205,
      "color": "#22c96b",
      "lightColor": "#248a3d",
      "labelColor": "#61BB46",
      "lightLabelColor": "#248a3d",
      "side": "right",
      "relatedIds": [
        "child-2-lj87h",
        "photo",
        "visual-systems"
      ]
    },
    {
      "id": "lighting",
      "label": "Lighting",
      "parentId": "photo",
      "x": 722,
      "y": 44,
      "color": "#ffd23f",
      "lightColor": "#b18400",
      "labelColor": "#FDB827",
      "lightLabelColor": "#9f7200",
      "side": "right",
      "relatedIds": [
        "child-1-pecuq",
        "photo"
      ]
    },
    {
      "id": "narrative-design",
      "label": "Narrative Design",
      "parentId": "stories",
      "x": 276,
      "y": 536,
      "color": "#ff4f86",
      "lightColor": "#cf2f55",
      "labelColor": "#E03A3E",
      "lightLabelColor": "#c2292e",
      "side": "right",
      "relatedIds": [
        "child-1-hnk16",
        "child-2-hm8em",
        "hip-hop",
        "stories"
      ]
    },
    {
      "id": "hip-hop",
      "label": "Hip Hop",
      "parentId": "rap",
      "x": 70,
      "y": 526,
      "color": "#ff914d",
      "lightColor": "#c75f00",
      "labelColor": "#F5821F",
      "lightLabelColor": "#c75f00",
      "side": "left",
      "relatedIds": [
        "narrative-design",
        "rap",
        "stories"
      ]
    },
    {
      "id": "startups",
      "label": "Startups",
      "parentId": "economy",
      "x": 130,
      "y": 276,
      "color": "#17d6a5",
      "lightColor": "#148b6b",
      "labelColor": "#61BB46",
      "lightLabelColor": "#248a3d",
      "side": "right",
      "relatedIds": [
        "child-1-hnk16",
        "economy",
        "markets",
        "product-strategy"
      ]
    },
    {
      "id": "product-strategy",
      "label": "Product Strategy",
      "parentId": "startups",
      "x": 218,
      "y": 310,
      "color": "#ff4fd8",
      "lightColor": "#bd2d9d",
      "labelColor": "#963D97",
      "lightLabelColor": "#7c237d",
      "side": "right",
      "relatedIds": [
        "child-4-q9eho",
        "signals",
        "startups",
        "ux"
      ]
    }
  ]
}