On My Mind

OnMyMind - User Guide

Welcome to OnMyMind, your easy-to-use tool for creating visual diagrams and mind maps right in your web browser!

What is OnMyMind?

OnMyMind helps you visually organize your thoughts and ideas. You can add different shapes (which we call "nodes"), write or place content inside them, connect nodes with lines to show relationships, and arrange everything just the way you like.

Getting Around: The Canvas and The Toolbar

When you open OnMyMind, you'll see two main parts:

1. The Canvas: This is the large, open area where you'll build your diagram. It starts off looking empty (white or dark grey depending on your theme).

   • Think of it as your drawing board!

   • The canvas will automatically get bigger as you add nodes further down or to the right, so you always have space.

   • If you click anywhere on the empty canvas background, it will deselect any node you currently have selected.

2. The Toolbar: This is the bar at the very top of the page. It's packed with buttons and controls that let you add new nodes, style them, save your work, and more. We'll go through what each button does!

Building Blocks: Adding Shapes (Nodes)

Nodes are the core elements of your diagram. Here's how to add them:

• Look at the buttons in the toolbar: Rectangle, Circle, Ellipse. Clicking any of these will add that shape to your canvas near the top-left area.

• Import Image: Want to add a picture? Click this button, and your computer's file explorer will pop up. Choose a .png or .jpeg image file, and it will be added to the canvas as an image node.

Working with Nodes: Selecting, Moving, and Deleting

Once you have nodes, you'll need to manage them:

• Selecting a Node: To work with a node (like editing its text, changing its color, or resizing it), you first need to select it. Just click on the node itself (don't click directly on a link inside or the tiny corner handle yet!). You'll see a dashed outline appear around the selected node, and a small blue square handle will appear at the bottom-right.

  • Most of the buttons in the toolbar will now apply to this selected node!

• Moving Nodes: Click and drag a selected node anywhere on the canvas to reposition it.

• Deleting Nodes: Select the node you want to remove (make sure it has the dashed outline). Then, press the Delete key or the Backspace key on your keyboard. The node and any connections it had will disappear.

Adding and Styling Text:

Most nodes (Rectangle, Circle, Ellipse) are designed to hold text.

• Editing Text: Simply right-click inside a non-image node's area. A text cursor will appear, and you can start typing or editing the existing text.

  • Press Enter inside the text area to start a new line.

  • When you're finished editing the text in a node, click anywhere outside of it (on another node or the canvas background).

• Text Formatting: With a node selected, you can use these toolbar buttons to style the text inside it:

  • B / I / U: Click these to toggle Bold, Italic, or <ins>Underline</ins> styles. You can click the button first and then type, or select existing text inside the node and then click the button to apply the style.

  • -A / +A: Click these to decrease (-) or increase (+) the size of the text inside the selected node.

  • • List: Click this to turn the current line or selected text into a bullet point item.

  • Left / Center / Right: Click these to change the horizontal alignment of the text inside the selected node.

Adding Links:

You can turn text inside a node into a clickable web link:

• First, select the node.

• Right click inside the node's text area and select the specific text you want to become the link by highlighting it with your mouse.

• Click the Link button in the toolbar.

• A small box will ask for the URL (the web address). Type or paste it in (like https://www.example.com) and press Enter or click OK.

• The text you highlighted will now look like a hyperlink.

• Using Links:

  • Hover your mouse over a link you created. A small grey box will pop up saying "Shift+Click to Go to Link".

  • To actually open the link, hold down the Shift key on your keyboard and click the link. It will open in a new browser tab.

  • If you click a link without holding Shift, you can still edit the text around it or click slightly off the link to edit the text inside the node.

Connecting Your Ideas: Drawing Lines

Arrow lines (connectors) show relationships between your nodes.

• To draw a connection, click and drag from:

  • The text area inside a non-image node.

  • The image itself inside an image node.

• Drag the line that appears over to the node you want to connect to.

• Release the mouse button when your cursor is over the target node.

• An arrow line will be drawn connecting the two nodes!

• To delete a connection line, double-click directly on the line itself.

Changing Appearance and Size:

• Resizing Nodes: When a node is selected, you'll see that small blue square resize handle at the bottom-right corner. Click and drag this handle to change the node's size.

  • Rectangle and Ellipse nodes can be made wider or taller independently.

  • Circle nodes will resize keeping their width and height equal (staying round).

  • Image nodes will resize freely, but you can try to keep them proportional by dragging carefully or if the underlying content helps.

• Coloring Nodes: With a node selected, look next to the Save button in the toolbar. There's a small box – this is the Color Picker. Click it to open a window where you can choose a background color for your selected node.

Arranging Your View: Zooming and Rotating

• Zoom + / -: Use these buttons in the toolbar to zoom in (+) or zoom out (-) your view of the entire canvas. This doesn't change the actual size of the nodes, just how big they look on your screen.

• Rotate L / Rotate R: Select a node and click these buttons to rotate the node 15 degrees to the left or right.

Switching Themes:

• Click the Toggle Theme button to switch the application's colors between a light mode (default) and a dark mode. The connector lines will also change color to match the theme.

Saving and Loading Your Diagram

• Save: Click the Save button. Your browser will download a file named onmymind.omm. This is your diagram file! Keep it safe on your computer.

• Load: Click the Load button. A window will open asking you to select a file. Find the .omm file you saved earlier and open it.

  • Heads Up: Loading a file will completely replace whatever diagram is currently on your canvas with the one from the file. Make sure you've saved anything you needed before loading!

Sharing Your Diagram

• Export PNG: Click Export PNG to save your entire diagram as a .png image file. This is useful for sharing or inserting into documents. Connection lines are included in the export.

• Export PDF: Click Export PDF to save your entire diagram as a .pdf document. This also includes connection lines.

Have fun organizing your thoughts and ideas with OnMyMind!