Use this free online diagram maker to map workflows, explain systems and plan your next project. Add icons, choose your style and export an editable visual.
5.0(1 rating)Diagram examples in every NM style
Explore 32 examples in five NM styles. Compare light and dark, open a larger preview, or load an example to edit and animate it. Undo returns to your previous work.
One idea, five styles
Compare the same editable diagram with real platform marks.
This free online diagram maker turns your steps, tools and ideas into a diagram you can edit. Map a workflow, explain your AI setup, plan a launch or show how a system fits together.
Start with an example, change the words and connections, then choose your icons, colors and style. You can make a hand-drawn diagram, work on a light or dark canvas, and animate the explanation for a presentation.
Download an image for a post, an editable project for later, or an animated HTML file that plays in a browser. You can also add the diagram to the online whiteboard and keep editing it there.
It's free, with no signup. You can use every editing control yourself; AI is optional.
What is a diagram maker?
A diagram maker is a tool for showing how things connect. You add the people, steps, tools or ideas involved, then arrange them so someone can follow the relationship between them.
A flowchart explains a decision. An architecture diagram shows the parts of a system. An org chart shows who is responsible for what. Each answers a different question through its layout.
This diagram maker has 32 diagram types, editable items and connections, real platform icons, 5 visual styles and light and dark canvases. It handles the layout while you work on the content.
For numerical comparisons, trends and proportions, use the chart maker. For an open canvas with screenshots, notes and several diagrams, use the whiteboard.
Who is the diagram maker for?
It's for anyone who needs to explain a process, organize a plan or document how something works. You don't need to know a diagramming language or write code.
| Who it's for | What you can make |
|---|---|
| Creators and educators | Lesson diagrams, content workflows and visuals for an article or video |
| Founders | Launch plans, product workflows and an overview of the tools running the business |
| Marketers | Lead magnet delivery, email sequences and the decisions in a customer journey |
| Teams and consultants | Onboarding processes, responsibilities and client handoffs |
| Developers and AI builders | Architecture maps, data flows and dependencies between tools |
| Students | Concept maps, timelines and revision notes that show how ideas relate |
Start with the person who will read it. A client needs the path from request to result. The person building the automation also needs the trigger, the apps involved and what happens when a step fails.
Those can be 2 diagrams on the same board: an overview for the conversation and a detailed version for the work.
How to make a diagram
Write the question your diagram should answer before choosing a layout. “What happens after someone downloads my guide?” gives you a more useful starting point than “Make a marketing diagram.”
Load example gives you a fresh starting point. If you want to try a different layout with your own content, change the diagram type instead. Undo lets you step back after an edit.
Use short titles such as “Send the guide” or “Review the draft.” Put the supporting explanation in Details so the main path is easy to scan.
Which type of diagram should you use?
Choose the structure that matches the relationship. A sequence, a hierarchy and a group of dependencies need different layouts, even when they describe the same project.
The gallery lets you compare examples before you commit. Open a larger preview, switch between light and dark, or load an example into the editor.
| What you need to explain | Diagram types to try |
|---|---|
| Steps and decisions | Process, flowchart, swimlane or state machine |
| A system and its tools | Architecture, IT current-state, high-level map or deployment |
| Dependencies and messages | Dependency graph or sequence |
| How information moves | Data flow, data platform integration or medallion |
| Data and code structure | ER / data model, database schema or UML class |
| Roles and access | Security matrix |
| Dates and work in progress | Timeline, Gantt chart or Kanban board |
| People and hierarchy | Org chart, tree, nested hierarchy or layer stack |
| Priorities and groups | Quadrant, Venn diagram or pyramid / funnel |
| A repeating cycle | Loop / flywheel |
| A customer or product experience | User journey or story map |
| Causes and strategic choices | Fishbone or Wardley map |
The technical types are visual planning views. You can describe fields, roles and relationships, but the tool doesn't validate SQL, compile UML or enforce access permissions.
Processes, flowcharts and swimlanes
A process diagram works well when the steps usually happen in order: write a draft, review it, publish it and share it.
Use a flowchart when a choice changes the next step. Label the branches “Approved” and “Needs changes,” for example, so the reader doesn't have to infer the decision from position or color.
A swimlane adds ownership. Give each item a Group or lane such as “Customer,” “Support” or “Delivery.” You can then see where work moves between people, including handoffs that are easy to miss in a written checklist.
Architecture, AI systems and data flows
An architecture map is useful when you need to show which apps or services work together. Use the available platform marks for the actual tools, and label each connection with what passes through it.
For an AI workflow, that might be a request entering an assistant, the assistant reading reference material, and a reviewed answer going into a document. A brain icon can identify memory; a database icon can identify stored records.
Keep the human review step visible when it exists. A drawing should describe the workflow you actually use, including where someone approves an action or corrects a result.
Use a data flow when the information itself is the subject: where it comes from, what changes and where the output goes. Use a dependency graph when the important question is what relies on what.
Timelines, journeys and project plans
A timeline shows when events happen. A Gantt view gives a task a start and end date, which is useful when several pieces of work overlap.
For Timeline and Gantt items, enter dates in the field labeled Start | end (YYYY-MM-DD). An example is 2026-10-01 | 2026-10-05.
A user journey follows someone's experience across stages. You could map discovering a guide, signing up, receiving it and deciding what to do next. Put what the person needs at each stage in Details.
Kanban and story maps help organize work for a discussion. They are planning diagrams here; they don't sync tasks with your project management app.
Hierarchies, loops and causes
Use a tree when 1 idea branches into smaller parts. Use an org chart when the branches describe people and responsibility, or a layer stack when each level has a different job.
A loop shows how an outcome feeds back into the next round. A content workflow might connect audience questions, research, a published lesson and new questions. Name the feedback instead of drawing an unexplained arrow back to the start.
A fishbone helps you group possible causes of a problem. Treat those branches as hypotheses to investigate. Adding something to a diagram doesn't make it a proven cause.
Example: map a lead magnet launch
Say you're planning a guide that introduces readers to a new workshop. You want to see how someone gets the guide, what they receive afterward and where the workshop invitation belongs.
Start with a Process diagram and build the main path below. These are planning steps, not measured results or a claim about how your current business works.
| Step | What to put in the diagram |
|---|---|
| Share the guide | Name the actual post, video or email that introduces it |
| Open the signup page | State the promise and what someone signs up to receive |
| Deliver the resource | Show which email contains the download and where it links |
| Help the reader use it | Add the lesson or follow-up that helps them get a result |
| Invite them to the workshop | Show the invitation and registration step |
| Follow up | Separate the next step for attendees and people who couldn't join |
Now look for the decisions. If existing subscribers should receive a different message, switch to a flowchart and add that branch. If a teammate owns delivery, use a swimlane to show the handoff.
Give each connection a useful label. “Signup submitted,” “Guide delivered” and “Workshop registered” tell you what must happen before the next stage begins.
Move the diagram to the whiteboard when you want to add the actual signup page screenshot, email copy and social cards beside it. The diagram holds the structure; the surrounding material lets you review what people will see.
If you want to show conversion numbers, create a separate funnel chart in Chart Maker. Label estimates as assumptions and recorded figures with their source and date. The diagram maker doesn't track visitors or forecast revenue.
Add real icons and platform logos
Select an item and open Item icon. The picker includes symbols for people, memory, files, email, databases and other common parts of a workflow.
It also includes real marks for tools and platforms such as Claude, OpenAI, Notion, GitHub, Google Sheets, YouTube, X, Instagram, Figma, Canva and Miro. Use a platform's mark when that platform is part of the system you're describing.
A logo identifies the app in your diagram. It doesn't connect an account or import that app's files.
Keep the text label even when the logo is familiar. “Review in Notion” explains the job; the icon lets the reader recognize the tool quickly.
Choose your style, colors and corner radius
Open Style to change the appearance without rewriting the diagram. The same content can use any of the 5 treatments.
| Style | A useful place to start |
|---|---|
| NM clean | Workflows and system overviews with a restrained visual treatment |
| Hand drawn | Sketches for lessons, workshops and explaining an idea |
| Editorial | Diagrams for an article, report or written guide |
| Presentation | Visuals you plan to explain on a slide |
| Terminal | Technical workflows and diagrams with a terminal-style treatment |
Choose Canvas theme for a light or dark result. This is separate from the site's appearance, so you can work on a dark site and still export a light diagram for a document.
Use the Accent and Background pickers for your colors. The Corner radius control runs from 0 to 24 px; 6 to 8 px is a useful starting point for the NM look. Choosing a new canvas theme resets the background to that theme's default.
Check the result at the size someone will actually read it. A label that looks fine while zoomed in may be too small in an email or a slide shared on a phone.
Size a diagram for slides, posts or documents
The size menu includes a 1200 × 760 workspace, a 1920 × 1080 presentation, a 1080 × 1080 square and a 1080 × 1350 portrait.
Diagrams can expand beyond the selected size to make room for their content. Check the final dimensions above the preview before exporting, especially when you have long labels or many items.
For a fixed 16:9 slide, keep the main diagram short enough to fit. You can also place it inside a whiteboard presentation frame and put the detailed version on another part of the board.
Use Fit to see the full composition. Zoom in to inspect the labels and connection paths before sharing it.
Animate a diagram for a presentation
Open Motion to choose a still, a reveal or an ordered build. Play it through, pause it, or use the progress control to check a particular moment.
An ordered build can help when you're introducing a process step by step. A static version is often better when someone needs to scan the whole system at once.
The animation plays once and stops. Reduced-motion preferences are respected, and the completed diagram remains readable without movement.
Export Animated HTML to keep the animation and playback controls in a browser file. PNG, JPG, WebP, SVG and PDF show the completed still. Video and GIF export aren't included in this tool.
Use AI to help draft your diagram
You can create the whole diagram with the editor. If you want help turning a written process into items and connections, Use with AI copies a brief containing your current project and the supported format.
Paste that brief into your own AI tool, then add the source material and instructions. For example:
Create a flowchart for this lead magnet delivery process. The audience is the teammate setting up the emails. Preserve every decision and label the branches. Use the supplied platform names, a dark canvas and hand-drawn styling. Ask about missing steps instead of inventing them.
Keep the format instructions copied by the tool. Ask the AI to return a .nmvisual project, then use Open project to load it here.
Review the labels, decisions and source before using the result. Your AI service has its own plan and limits; this tool doesn't call a paid model or generate a diagram automatically from a prompt inside the page.
Add a diagram to your whiteboard and keep editing it
Choose Add to whiteboard to place the diagram on a board. Its editable source goes with it, including the items, connections, icons and appearance settings.
Select the visual on the board and choose Insert → Edit selected visual. The same editor opens so you can make a change and choose Update on board.
The board displays a rendered image you can move and resize. The diagram's internal items are edited in Diagram Maker, so you can revise the structure without redrawing the whole thing.
The diagram's animation remains available in its editor and Animated HTML export. The board image itself doesn't play the internal step-by-step animation.
Which file should you download?
Keep an editable project alongside your finished export. An image is useful for sharing; the project lets you change the words and connections later.
| Format | What you can do with it |
|---|---|
| Editable project | Reopen the .nmvisual file with its items, connections, icons, style and motion settings |
| SVG | Use vector artwork and text in a compatible design application |
| PNG | Add a still diagram to a slide, document or article |
| JPG | Share a still image where JPEG is the preferred format |
| WebP | Use a web image format where your publishing tool supports it |
| Share the completed diagram on a fixed page | |
| Animated HTML | Open the diagram and its playback controls in a browser |
Image exports have 1×, 2× and 3× resolution options, subject to the tool's image-size limit. A higher resolution gives you more pixels; it doesn't make a crowded diagram easier to understand.
SVG is a file handoff, not native synchronization with Figma, Miro or Canva. Fonts and editing behavior can change in another application. PDF is a still image on a page, so keep the project for future edits.
Your draft saves in this browser when storage is available. Clearing site data can remove it. Download the project when you want a backup or need to continue on another device.
Diagram Maker, Chart Maker or Whiteboard?
Choose the tool based on what you need to explain. You can use them together on the same project.
| Tool | Use it for |
|---|---|
| Diagram Maker | Steps, decisions, structure and relationships between items |
| Chart Maker | Numerical comparisons, trends, proportions, statistics and heatmaps |
| Framework Diagram Maker | A framework presented as a 3D visual |
| Online whiteboard | A larger canvas with diagrams, charts, screenshots, notes and presentation frames |
For a launch, start with a diagram of the process. Add a chart when you have numbers to explain. Put both on a whiteboard when you want to review the pages, messages and plan together.
If you're explaining a framework through a cycle, pyramid or set of pillars, try the framework diagram maker too.
Diagram maker FAQs
Questions about making a diagram? Here's what to know.
A diagram maker is a tool for showing how steps, people, tools or ideas connect. You add the items and relationships, then choose a layout that makes them easy to follow.
This one runs in your browser and includes editable examples, icons, light and dark canvases, animation and exports.
A diagram is a visual explanation of a structure, process or relationship. A flowchart shows decisions, an org chart shows responsibilities, and an architecture diagram shows the parts of a system.
A flowchart is a type of diagram that shows steps and decisions along a path. Diagram is the broader term: it also includes timelines, hierarchies, system maps and other ways of showing relationships.
It is for creators, founders, educators, marketers, consultants and teams who need to explain a process or plan. Developers can also use it to sketch systems and data flows.
You can edit through the controls without writing code.
Yes. Editing and exports are free, with no signup. Layout and rendering run in your browser.
Use with AI copies instructions for your own AI service, whose plan and limits still apply.
There are 32 types, including process diagrams, flowcharts, swimlanes, architecture maps, timelines, org charts, loops, user journeys and data flows.
Technical layouts such as database schemas and UML class diagrams are planning views here. They do not validate a database or compile code.
Yes. Select an item and open Item icon. The picker includes platform marks such as Claude, OpenAI, Notion, GitHub, YouTube, X, Figma, Canva and Miro, alongside symbols for people, files and other workflow elements.
Adding a logo identifies a tool in the drawing; it does not connect that account.
Yes. Choose Hand drawn in Style, then choose Light canvas or Dark canvas. The canvas theme is separate from the site theme.
You can also change the accent, background and corner radius.
Yes. The size menu includes a 16:9 presentation, square and portrait. You can export an image at 1×, 2× or 3× resolution within the image-size limit.
Layouts can expand to fit their content, so check the final dimensions above the preview before exporting.
Animated HTML keeps the visual and browser playback controls. PNG, JPG, WebP, SVG and PDF show the completed still.
The editable project preserves your motion settings. This tool does not export MP4 or GIF.
It is the project file used by Diagram Maker and Chart Maker. It keeps the source content and appearance settings so you can reopen and edit your work.
Download it from Export → Editable project and load it later with Open project.
Yes. Select it on the board and choose Insert → Edit selected visual. Make your changes, then choose Update on board.
The board holds a rendered image and its editable source. Individual items inside it are edited in Diagram Maker.
Native import for those formats is not included in this version. Open project reads .nmvisual files.
You can export SVG for a compatible design application, but that is a file handoff rather than native synchronization. Fonts and editing behavior may differ.
Yes. Use with AI copies a brief with the current project and its format instructions. Paste it into your own AI tool, add your source material and ask for a .nmvisual file.
Open that file here and review the labels and connections. There is no built-in paid AI generation service.
Your draft saves in this browser when local storage is available. Download an editable project to back it up or open it on another device.
Clearing site data can remove the local draft. Live collaboration and account-based cloud sync are not included.
This diagram maker is built by Navid Moazzez and Navid Media. It shares its editor and visual styling with Chart Maker and the diagram editor inside the online whiteboard.
Navid Moazzez
AI business strategist & AI OS builder
Navid Moazzez helps creators and founders master AI and build their own AI Operating System (AI OS) to automate their business and life.
Navid.me is reader-supported. When you buy through links on this site, I may earn an affiliate commission. Learn more.
More free tools
X
Bluesky
LinkedIn
Threads
Mastodon
Instagram
TikTok
Pinterest
YouTube
Amazon KDP
Apple Books
Amazon
Substack
Spotify
Apple Podcasts
Free AI newsletterThe most actionable AI newsletter for founders
Every week, get proven AI strategies, curated tools, and step-by-step systems to grow your audience, create better content, and build a profitable creator business.
No fluff, no filler, no BS. Just five minutes each week that might level up your online business and life.
P.S. Sign up now to get free access to my ultimate AI tools guide for creators.
