Mind Map Represented by Node Arrays and Parent-Child Relationships
This tool holds a single mind map as an array of MindmapNode objects. Each node has an id, a display string text, a parentId indicating its parent, x and y coordinates on the workspace, and a color used for borders and connection lines.
It does not have an independent children array; a node's children are found by searching the array for elements whose parentId matches that node's id.
In the initial state, there are 6 sample nodes including the root, and the currently selected node is the root.
Only the root node has a null parentId and cannot be deleted. When a non-root node is deleted, it recursively searches for children, removes the target node and all its descendants from the array, and returns the selection to the root.
There is no confirmation screen before deletion or undo operation. It also lacks features to delete only a parent while leaving descendants, to change the hierarchy by reattaching to another parent, or to select multiple nodes simultaneously.
The array being edited is placed in the page's memory as React state. Automatic saving to localStorage or IndexedDB, server saving, change history, and JSON or OPML input/output are not implemented.
Therefore, if you reload or navigate away from the page without exporting an image, the created content cannot be restored in an editable state.
Adding Child and Sibling Nodes, Text Editing, and Color Changes
When a child node is added, the new node is placed 200 pixels to the right of the selected parent. It uses the existing number of children of the same parent to shift the vertical position in increments of 80 pixels, selects the new node, and begins text editing.
A random color from seven presets is assigned to immediate children of the root, and deeper children inherit their parent's color.
This is a placement rule immediately after addition, not a process that detects and avoids overlapping with other nodes.
A sibling node has the same parent as the currently selected node and is created 80 pixels below the selected node. Siblings cannot be added to the root, which has no parent.
Node text can be changed directly from the input field on the right, or edited in the input field within the node if you double-click the node.
If the input is empty upon confirmation, it is replaced with the string "Empty node".
The color is selected from seven presets and is applied to the border of the selected node and the connection line entering that node.
Changing a parent's color does not automatically propagate to all existing descendants. There are no collaborative editing features such as displaying collaborators' cursors, comments, access permissions, or resolving conflicting changes.
Since it does not manage collapsed or expanded states, all nodes in the array are always rendered.
2000x2000 HTML Nodes and SVG Connection Lines
The drawing target is a fixed area 2000 pixels wide and 2000 pixels high. Each node is drawn as an absolutely positioned HTML div element, and only the lines connecting parents and children are drawn on an SVG layer of the same size.
It is not structured to redraw nodes onto a Canvas. The connection line is a cubic Bezier curve, calculating points 85 pixels to the right of the parent coordinates and 85 pixels to the left of the child coordinates as endpoints, connecting them in an S-shape with intermediate control points.
Because the endpoints use fixed values rather than being calculated from the actual measured width of the nodes, the lines might not connect strictly to the center of the border if long text changes the node's display width or height.
In dragging a node, the movement amount from where the mouse was pressed is divided by the current zoom rate to update the x and y coordinates.
The left and top edges are restricted to not fall below 20 pixels, but since there is no upper limit for the right and bottom edges, nodes can sometimes be moved outside the 2000x2000 area.
The frame visible on the operation screen has a height of 550 pixels, hiding any protruding parts. The dotted background pattern moves according to the display position, but the workspace itself does not expand infinitely.
Dragging is implemented with mouse events, and touch-exclusive movement processing or operability on mobile devices is not guaranteed.
Automatic Alignment, Zoom, Pan, and Keyboard Operations
Automatic alignment places the root at coordinates [150, 240] and advances each hierarchy 220 pixels to the right. A height budget of 65 pixels is assigned to terminal nodes, and nodes with children sum the height budgets of their descendants.
It is a recursive process that determines the vertical position of siblings sequentially using those values. It is a feature that calculates a simple hierarchical arrangement once; it is not a general collision avoidance or optimal alignment that considers text size, connection lines, or the right edge of the workspace.
With deep hierarchies or numerous nodes, they may protrude outside the area or result in a layout that is hard to see.
Zoom is changed in 10% increments from 50% to 180%. Pan applies a translate to the entire drawing target by dragging the background outside the nodes with the mouse.
The reset operation returns the zoom to 100% and the pan to [0, 0]. Zoom and pan are display transformations and do not change the coordinates on the 2000x2000 plane that the nodes possess.
After automatic alignment, the display position is moved to [50, 40].
On the keyboard, Tab adds a child to the selected node, Enter adds a sibling, and Delete or Backspace deletes it. Pressing Enter while the root is selected adds nothing because the root has no parent.
If you attempt to delete the root with Delete or Backspace, it notifies you that it cannot be deleted. These shortcuts are not processed while editing node text or while focus is in an input or textarea.
html-to-image Processing for Creating PNG and SVG Images
For image saving, the 2000x2000 drawing target DOM is passed to html-to-image's toPng or toSvg. To prevent the zoom and pan on the screen from being mixed into the image, the zoom is temporarily returned to 100% and the pan to [0, 0] before processing, and it waits via a 150ms timer before creating the image.
A dark navy blue is specified for the background color. The generated data URL is set to a download link, and after initiating the save operation with names like mindmap-<timestamp>.png or .svg, it returns to the original zoom and pan.
Saving as SVG is also not a process where the tool reconstructs the nodes into pure SVG shapes. html-to-image converts the DOM display, including HTML nodes, CSS, connection lines, and fonts, into an SVG format data URL utilizing elements like foreignObject.
The result depends on the browser and fonts used; it is not guaranteed to consist only of pure vector elements, that each node can be re-edited in other SVG editing software, or that all elements will remain degradation-free when enlarged.
During image generation, the PNG and SVG save buttons are not disabled, and there is no on-screen processing indicator. Please avoid duplicate clicks and check your downloaded files.
There are no screen messages for success or failure; failures are only logged to the console. Because the entire 2000x2000 DOM is converted into an image at once, it may take time or fail to generate depending on the number of nodes, browser memory, and font or style loading status.
Purpose of Use and Checks to Prevent Losing Edited Data
This editor is intended for temporarily organizing ideas, class content, project points, etc., as parent-child relationships by adding child items from a central theme.
Dragging is an operation that changes the display coordinates of a node; it is not an operation to reattach a parent-child relationship to the node being dragged onto.
Individual coordinates can be adjusted even after automatic alignment, but if automatic alignment is applied again, they will be relocated to positions based on hierarchy calculations.
The current feature scope does not include automatic saving, undo/redo history, saving and loading files for editing, JSON/OPML input/output, collaborative editing, node collapsing, searching, or page break adjustments for printing.
PNG and SVG are images for sharing the appearance at the time of completion, not project files for reading back into this tool to continue editing.
In particular, node deletion requires checking the target beforehand, as it is immediately reflected including descendants.
Node operations and image generation are executed by JavaScript on the page, and there is no feature to save the entered map to a server.
However, that alone does not guarantee that there is no external communication from the page entirely, that information is always protected, or that the image will be the same in all browsers.
When handling important concepts, please save the image at each necessary stage and verify that the saved file can be opened and that text and lines are drawn as expected.