Visualize Your Thoughts with the ChatGPT-Integrated Text-to-Chart Miro Plugin
Streamline your workflow by transforming text into flowcharts within Miro, powered by ChatGPT
Since discovering Miro.com for personal use, I’ve found it to be an incredibly user-friendly tool that allows me to easily lay out my thoughts and plans on a digital whiteboard. As a Miro user and developer, I am constantly looking for ways to contribute to the platform and enhance its functionality. Recently, I created a Miro plugin that leverages the power of ChatGPT to transform text into flowcharts directly within the Miro environment. In this blog post, I will walk you through the development of this plugin and how you can use it to streamline your work in Miro.
The Idea: Text to Chart Plugin
The main objective of the plugin is to convert text content on a Miro board into a flowchart by utilizing ChatGPT. The idea was inspired by my previous experience with Mermaid.js, a library that allowed me to create flowcharts for my code directly in a README file.
How It Works:
Step-by-step guide to using the Text-to-Chart Miro Plugin:
1. The plugin connects to the Miro board and listens for events.
2. When a user clicks on a text element, the plugin captures the text.
3. The user selects the desired chart type and clicks submit.
4. The text is processed by ChatGPT, which returns a JSON file containing shapes, connectors, and connections.
5. The plugin creates Miro shapes on the board, conforming to the data flow.
Development Process:
Creating the plugin from scratch:
I began by creating a new app in the Miro Marketplace and setting up the application. I opted to use the Miro Web SDK to build an app that runs inside the board itself.
Next, I created a simple form and event listener to capture events from Miro. I tested the functionality by ensuring that when I clicked on a text element, the text would appear in my text box.
I then connected the plugin to ChatGPT by creating a prompt that instructs it to parse the input text data and return a JSON file with a structured hierarchy of shapes, connectors, and connections. This structure is essential for determining the positioning of elements on the Miro canvas.
Finally, I developed the createFlowchart function, which leverages ChatGPT’s assistance to build the flowchart based on the JSON data obtained.
const createFlowchart = async (inputData: FlowchartItemProps[]) => {
let shapeMap = new Map<string, string>();
let connectorMap = new Map<string, string>();
// Calculate the max hierarchy level
const maxHierarchy = inputData.reduce((max, item) => Math.max(max, item.hierarchy), 0);
// Count the number of items in each hierarchy level
const itemsPerHierarchy: number[] = Array(maxHierarchy).fill(0);
inputData.forEach((item) => itemsPerHierarchy[item.hierarchy - 1]++);
// Calculate the initial x values for each hierarchy level
const xValues: number[] = itemsPerHierarchy.map((count, i) => -((count - 1) * 200) / 2);
// Set the initial y values for each hierarchy level
const yValues: number[] = Array.from({ length: maxHierarchy }, (_, i) => i * 150);
// First, create all the shapes and store their IDs in shapeMap
for (let item of inputData) {
const color = getShapeColor(item.shape_type);
// Calculate x and y positions based on hierarchy
item.x = xValues[item.hierarchy - 1];
item.y = yValues[item.hierarchy - 1];
xValues[item.hierarchy - 1] += 200;
const shape = await createShape(item, color);
shapeMap.set(item.content, shape.id);
}
// Next, create the connectors for all the relations
for (let item of inputData) {
for (let relatedNode of item.relation_to_other_content) {
const startShapeId = shapeMap.get(item.content);
const endShapeId = shapeMap.get(relatedNode);
// Check if a connector already exists in the opposite direction
const existingConnectorKey = `${relatedNode}_${item.content}`;
// Skip creating a connector if the start and end shapes are the same, or if a connector already exists in the opposite direction
if (startShapeId && endShapeId && startShapeId !== endShapeId && !connectorMap.has(existingConnectorKey)) {
const relatedNodeData = inputData.find((node: FlowchartItemProps) => node.content === relatedNode);
let direction = 'down';
if (relatedNodeData) {
if (item.hierarchy < relatedNodeData.hierarchy) {
direction = 'down';
} else if (item.hierarchy > relatedNodeData.hierarchy) {
direction = 'up';
} else if (item.x < relatedNodeData.x) {
direction = 'right';
} else {
direction = 'left';
}
}
await createConnector(startShapeId, endShapeId, direction);
// Store the connector in the connectorMap
const connectorKey = `${item.content}_${relatedNode}`;
connectorMap.set(connectorKey, direction);
}
}
}
};Using the Text-to-Chart Miro Plugin:
With this plugin, Miro users can now quickly and easily convert their ideas and text content into flowcharts without needing to manually create and arrange shapes. This not only saves time but also helps users visualize complex processes and thoughts more effectively.
Demo
A random story generated by GPT:
One sunny day, while wandering near the river, Tom discovered a magical stone that granted him the power to make things grow. He was faced with a choice: should he use the stone’s power to help others, or keep it for himself?
If Tom chose to help others, he would use the stone to grow crops and heal the sick. His actions would bring prosperity to the village, and he would become a beloved hero.
However, if Tom decided to keep the stone’s power for himself, he would amass great wealth, but at the cost of his relationships with his friends and family. In the end, he would feel lonely despite his riches.
Ultimately, Tom’s decision would shape not only his life but also the fate of the entire village.
