Within Notion I have a database (containing the schema below)

• ‘Project Name’: 'str' - This is a simple text field which serves as a primary key
• ‘Status’: 'obj' - This contains a label indicative of how far along the project is.
• ‘Manager’: 'str' - The mail address of the project manager
• ‘Timeline’: 'date' - The expected date of completion
• ‘Progress’: 'float' - A percentage representation of status.
• ‘Parent Project’: 'obj' - A link connecting this project to the master project containing this, and other, projects.
• ‘Project Summary’: 'str' - Description
• ‘Parent Project Name’: 'str' - The text value of parent project, to allow explicit connection.
• ‘Depth’: 'int' - The level of this project in the tree
• ‘ParentProjectDepth’: 'int' - The level of the parent project in the tree, always one higher than depth.

I’d like to create a tree graph of this database with the singular ‘master’ project at the top, branching out into smaller and smaller and more atomic projects as the tree grows downward; I’ve decided to use Figma for this.

Table to Figma provides a plugin for Figma that allows syncing a Notion database into Figma. I’ve added it to my team project and set up the connection appropriately such that I can simply import the database. I’ve also created a template component so that every project gets an individual object placed into the Figma diagram when I generate the component as seen on the right.

The Automator plugin allows me to run actions, of many kinds, to affect work on the list of generated components, including allowing me to run Javascript.

I’m at the point where I have a List container populated by the Table to Figma plugin and can use the following code to access and organize the project information.

// Function to get information from a single project, accounting for the nested structure
function getProjectInfo(node) {
    // Find the ProjectDepth node and retrieve the depth
    const depthNode = node.findOne(n => n.name === "ProjectDepth");
    const depth = depthNode ? parseInt(depthNode.children[0]?.characters) : 0;

    // Find the Project Title And Summary node (containing both parent and project details)
    const titleAndSummaryNode = node.findOne(n => n.name === "Project Title And Summary");

    // Extract the parent project name
    const parentProjectNode = titleAndSummaryNode.findOne(n => n.name === "ParentProject");
    const parentProjectName = parentProjectNode ? parentProjectNode.children[0]?.characters : "";

    // Extract the project name
    const projectNameNode = titleAndSummaryNode.findOne(n => n.name === "ProjectName");
    const projectName = projectNameNode ? projectNameNode.children[0]?.characters : "";

    // Extract the project summary
    const projectSummaryNode = titleAndSummaryNode.findOne(n => n.name === "Project Summary");
    const projectSummary = projectSummaryNode ? projectSummaryNode.children[0]?.characters : "";

    // Return the information as an object
    return {
        // node,
        projectName,
        projectSummary,
        parentProjectName,
        depth: isNaN(depth) ? 0 : depth
    };
}

// Inspect the generated List to create a const projects
const listFrame = figma.currentPage.findOne(node => node.name === "List");
const projects = listFrame.children.map(node => getProjectInfo(node));

// Sort projects alphabetically by parent project and then by project name
projects.sort((a, b) => {
    if (a.parentProjectName < b.parentProjectName) return -1;
    if (a.parentProjectName > b.parentProjectName) return 1;
    if (a.projectName < b.projectName) return -1;
    if (a.projectName > b.projectName) return 1;
    return 0;
});

This outputs an array of objects of the following form:

Object { projectName: "OOTTI", projectSummary: "OOTTI is an innovative AI system designed to optimize information retrieval and personalized learning experiences through advanced algorithms and dynamic knowledge structures.", depth: 1, … }

depth: 1

parentProjectName: ""

projectName: "OOTTI"

projectSummary: "OOTTI is an innovative AI system designed to optimize information retrieval and personalized learning experiences through advanced algorithms and dynamic knowledge structures."