graphonline.top

You can build a graph in the browser at graphonline.top, run a shortest-path search on it, and export the result as an image — without installing anything. The site supports three input methods (adjacency matrix, incidence matrix, edge list) plus manual drawing, and also runs minimum spanning tree, connected-component, and Eulerian cycle algorithms on the same graph. This walkthrough covers the full path from data entry to reading the shortest-path result, and the errors you are most likely to hit.

Choosing how to enter your graph

The site offers four ways in, and the right one depends on what you already have:

If you paste a matrix, it must be square — the site rejects non-square input with "Matrix should be square." For a multigraph, the adjacency matrix holds the weight of the minimum edge between each pair of vertices, so parallel edges collapse to one value in that view.

Building the graph step by step

1. Open the graph editor. From the home page, choose "Create Graph," then pick your input method (adjacency matrix, incidence matrix, edge list) or start drawing on the canvas.
2. Enter or draw the vertices. On the canvas, use "Add vertex" to place nodes. If you are pasting data, list each vertex on its own line where the interface asks for vertex text.
3. Connect the edges. Use "Connect vertices" to link two nodes. For each edge you can set a weight — the edge dialog offers "no weight," a weight of 1, or a custom value, and you can replace the current weight or add a parallel edge (multigraph).
4. Label if needed. You can add text above an edge and rename vertices, which helps when the graph is dense.
5. Verify the structure. Check the adjacency matrix, incidence matrix, or distance matrix views to confirm the graph matches what you intended before running an algorithm.

Expected result: a rendered graph on the canvas with the vertices, edges, and weights you entered, ready for an algorithm.

Running the shortest path

1. Open the Algorithms menu and select the shortest-path option (the site's "Find shortest path" heading points here).
2. Choose the start and end vertices for the path.
3. Run the algorithm and read the result: the site returns the path and its total distance.

The same graph can then be reused for other algorithms without rebuilding it — minimum spanning tree, connected-component search, and Eulerian cycle are all available from the same menu. That is the main reason to keep one clean graph rather than re-entering data per task.

Saving and exporting

• Save the graph so you can reopen it later; the site confirms with "Graph was saved" and gives you a link.
• Export as an image — either a workspace screenshot or a black-and-white printed image.
• Export to SVG for a scalable vector version.
• Export to / import from a file if you want to move the graph between sessions or machines.

Common errors and how to fix them

"Matrix is incorrect. Use comma as separator." Your values are not comma-separated. Re-paste using commas only.

"Matrix should be square." Your adjacency matrix has a different number of rows and columns. Count the vertices and make the grid match.

"Adjacency Matrix has wrong format." The site offers a "fix matrix" button to repair it, or a "help" button explaining the expected format. Try fix first, then compare against the help example.

"Incidence Matrix has wrong format" / "Edge list has wrong format." Same pattern — use the fix button or the format help.

"The graph is too large for this algorithm." The algorithm has a vertex/edge ceiling. The error message states the limit and your current size. Split the graph or use a smaller subgraph.

"Your browser is not supported." The editor needs a modern browser; switch to an up-to-date version of a mainstream browser.

"Cannot create graph." Usually a downstream effect of one of the format errors above — fix the input format first and retry.

Practical notes

• The site is open source and has a Help page with a tutorial video if the text instructions are not enough.
• There is a "Create algorithm" option where you can paste your own algorithm and run it, and submitted algorithms are sent for review before being added to the site.
• Undo is available with Ctrl+Z, which matters when you are placing many vertices by hand.
• If something breaks, the site lists a contact address ([email protected]) for reporting problems.

For a quick task — say, finding the shortest route between two nodes in a weighted network — the fastest path is: paste an adjacency matrix, confirm it renders, open Algorithms, pick shortest path, choose endpoints, and export the result as SVG.

Paste a comma-separated square matrix into the "Using adjacency matrix" entry of Graph Online, and the tool draws the graph for you; from there you can run "Find shortest path" and other algorithms. This works when your matrix is square, uses commas as separators, and each row/column corresponds to one vertex. If the matrix is not square or uses another separator, the tool rejects it and offers a "fix matrix" or "help" option instead of building the graph.

What the adjacency matrix encodes

In this tool, an adjacency matrix is a square grid where both rows and columns represent vertices. The value at row i, column j describes the edge between vertex i and vertex j.

• A non-zero value means an edge exists; the value itself is used as the edge weight.
• A zero (or empty) value means no edge.
• For a multigraph, the matrix stores the weight of the minimum edge between two vertices, so parallel edges are collapsed to the smallest weight.

Because rows and columns must line up, the matrix has to be square. A 4×4 matrix describes 4 vertices; a 4×3 matrix is invalid.

Step-by-step: build the graph and run an algorithm

1. Open the site and choose Using adjacency matrix as the input method.
2. Type or paste your matrix into the input field, using commas as the separator. Each row goes on its own line.
3. Confirm the matrix is square (same number of values in every row, and as many rows as columns).
4. Submit it to create the graph. On success the workspace shows the vertices and edges, and you can save the graph, export it to a file, or save it as an image/SVG.
5. Select Find shortest path (or another algorithm from the Algorithms menu) and run it on the generated graph.

Expected result: after a valid paste, the graph appears in the workspace with the vertices and weighted edges you described, and the algorithm returns its result on that graph.

Handling matrix errors

If the format is wrong, the tool does not create the graph. It shows a message such as "Cannot create graph. Adjacency Matrix has wrong format" and offers a fix matrix button or a help button explaining the expected format. The generic error "Matrix is incorrect. Use comma "," as separator" points to one of two common causes:

After fixing, resubmit the matrix and check that the drawn graph matches your intended vertices and edges before running an algorithm.

Limits and things to know before you start

• The tool warns when a graph is too large for a given algorithm, reporting the vertex and edge counts and the maximum size that algorithm supports. If you hit this, the graph itself may still be valid — only that algorithm is out of range.
• The workspace supports zoom, moving, and styling, so you can verify a large matrix visually before running anything.
• Graph Online also accepts incidence matrices and edge lists, so if your data is not naturally a square matrix, one of those entry methods may fit better.

Once the graph is on screen and matches your matrix, running "Find shortest path" is a single selection — the matrix is the only input you need to get right.

An adjacency matrix is a square grid that represents a graph: each row and column stands for a vertex, and the cell at row i, column j records the connection between vertex i and vertex j. A 0 means no edge, a 1 means an unweighted edge, and any other number is the edge's weight. You can read a matrix to understand a graph, or build one to feed a graph tool such as Graph Online, which accepts an adjacency matrix as one of its input methods alongside incidence matrices and edge lists.

How to read an adjacency matrix

Set up the matrix so the first row and first column both list the vertices in the same order. Then read each cell:

• 0 — no edge between that row's vertex and that column's vertex.
• 1 — an edge exists (unweighted graph).
• A weight value (e.g. 5) — an edge exists with that weight (weighted graph).

For a graph with vertices A, B, C:

    A  B  C
A [ 0  1  0 ]
B [ 1  0  4 ]
C [ 0  4  0 ]

This says A–B is connected, B–C is connected with weight 4, and A–C has no edge.

Undirected vs. directed graphs

In an undirected graph, the matrix is symmetric: the cell at row i, column j equals the cell at row j, column i, because the edge goes both ways. The example above is symmetric.

In a directed graph, the matrix is generally not symmetric. A 1 at row A, column B means an edge from A to B only; the reverse cell can be 0.

Weighted graphs

For weighted graphs, replace 1 with the edge weight. A 0 still means "no edge," so a genuine edge of weight 0 would be ambiguous — treat 0 as "no connection" unless your tool specifies otherwise.

How to build a matrix from a graph

1. List every vertex and assign each a row and column in the same order.
2. Start with all cells at 0.
3. For each edge, find the row of one endpoint and the column of the other, and write 1 (or the weight).
4. For an undirected graph, mirror every entry across the diagonal.

How to reconstruct a graph from a matrix

1. Confirm the matrix is square (same number of rows and columns).
2. Label rows and columns with vertex names in matching order.
3. For each non-zero cell, draw an edge between the two vertices; use the cell value as the weight.
4. If the matrix is symmetric, the graph is undirected; if not, treat each entry as a one-way edge.

Common format pitfalls

Graph Online validates the matrix before creating a graph and reports specific errors, so watch for these:

• Non-square matrix — the tool states "Matrix should be square." Rows and columns must match.
• Wrong separator — entries must be separated by commas (,). Using spaces or semicolons triggers "Matrix is incorrect. Use comma "," as separator."
• Wrong format overall — you'll see "Adjacency Matrix has wrong format," with options to click fix matrix or open help on the expected format.
• Multigraphs — the tool notes that a multigraph matrix contains the weight of the minimum edge between vertices, so parallel edges collapse to one value.

Using a matrix in Graph Online

Graph Online offers Create Graph Using adjacency matrix as a dedicated entry point. Paste your comma-separated matrix, and if the format is valid the graph is generated; if not, the error messages above tell you what to correct. Once the graph exists, you can run algorithms such as find shortest path, minimum spanning tree, connected-component search, and Eulerian cycle, and view outputs including the adjacency matrix, incidence matrix, and distance matrix.

If your data is easier to express as a list of edges rather than a grid, the same site also accepts an edge list and an incidence matrix, so you can pick whichever representation matches your source data.

An open-source UI element library is a collection of individual, ready-made interface pieces—buttons, cards, inputs, toggles, loaders—that you copy into your own project and adapt. A UI framework, by contrast, is a structured system of components, conventions, and often a theming layer that governs how your whole interface is built. The practical difference: an element library gives you a snippet; a framework gives you a way of working. If you need a polished button in ten minutes, reach for the element library. If you're building a 40-screen product with a team, you probably want the framework.

What "open-source UI element library" actually means

The term gets used loosely, so it helps to separate the parts:

• Open-source: the code is publicly available, and the license tells you what you may do with it—copy, modify, redistribute, or use commercially.
• UI element: a single, self-contained piece of interface, usually small enough to read in one sitting. A button with hover states, a pricing card, a search field.
• Library: a browsable, searchable collection of those elements, typically contributed by many different people.

On a site like Uiverse, elements are shared by a community and written in plain CSS or Tailwind. You find one you like, copy the markup and styles, paste them into your project, and adjust colors, spacing, and text to fit. There's no package to install and no build step required—which is exactly the appeal, and also the source of most of the confusion.

Element library vs. UI framework: the core differences

The table isn't a verdict. It's a map of trade-offs. Element libraries win on speed and freedom; frameworks win on consistency and maintenance.

Licensing and attribution: what to check before you paste

This is where people get into trouble, and it's worth slowing down for.

1. Find the license. Every element or collection should state one. Common open-source licenses include MIT, Apache-2.0, and BSD. Some projects use copyleft licenses like GPL, which can impose obligations if you redistribute your code.
2. Understand what the license permits. MIT and Apache-2.0 are permissive: you can typically use the code in commercial and closed-source projects. Copyleft licenses may require you to release derivative source under the same terms.
3. Check attribution requirements. Permissive licenses usually require you to keep the copyright notice and license text somewhere in your project. That's a real obligation, not a formality.
4. Look for per-element terms. On community sites, the site's overall terms and the individual contributor's stated wishes may differ. If a contributor asks for credit, honor it.
5. When in doubt, ask or avoid. If a snippet has no license at all, you don't have clear permission to reuse it. Treat "no license" as "not open source," even if the code is publicly visible.

This article is general information, not legal advice. For commercial products with real exposure, have someone qualified review the licenses you're relying on.

How to use a community element in your project: a practical workflow

Here's a repeatable process that avoids most of the usual mess.

1. Start from a real need, not a browsing session

Decide what you need first—"a compact primary button with a loading state"—then search. Browsing aimlessly produces a pile of pretty snippets that don't fit together.

2. Copy the smallest version that works

Take the markup and the styles. Strip anything you don't need: demo wrappers, extra animations, decorative layers. Less code means fewer surprises.

3. Convert it to your conventions

If your project uses design tokens or CSS variables, replace hard-coded values:

/* Before: hard-coded */
.button { background: #4f46e5; border-radius: 8px; }

/* After: token-based */
.button { background: var(--color-primary); border-radius: var(--radius-md); }

This one step is what keeps a copied element from looking like a foreign object in your UI.

4. Check accessibility before you ship

Community elements vary widely here. Verify at minimum:

• Keyboard focus is visible and the element is reachable by Tab.
• Color contrast meets WCAG AA (4.5:1 for normal text).
• Interactive elements use semantic HTML (<button>, not a clickable <div>).
• Form inputs have associated labels.
• Motion respects prefers-reduced-motion.

5. Test in context

Paste it into a real page with real content. Long labels, small screens, and dark mode break more copied elements than anything else.

6. Note where it came from

Keep a short comment or an internal credits file: source, license, date. Future you—and your legal reviewer—will be grateful.

Where element libraries genuinely shine

• Prototypes and demos: you need something clickable today, not a design system.
• Landing pages and marketing sites: a handful of distinctive elements, each custom.
• Filling gaps: your framework lacks one specific component, and you don't want to build it from scratch.
• Learning: reading well-made CSS is one of the fastest ways to improve.
• Small projects: a personal site doesn't need a theming architecture.

Where they fall short

• Consistency at scale: ten elements from ten contributors rarely look like one product.
• Maintenance: you own every copy. When your design changes, you edit each one.
• Accessibility debt: you inherit whatever the contributor did or didn't do.
• No upstream fixes: a bug fixed in the original won't reach your copy.
• Integration friction: different naming conventions, different units, different assumptions about resets.

When to choose which

Choose an element library when the scope is small, the timeline is short, or you need a few distinctive pieces rather than a whole system.

Choose a framework or design system when multiple people build multiple screens over months, when consistency is a product requirement, or when accessibility and theming need to be guaranteed rather than checked.

A hybrid works well for many teams: adopt a framework for the structural components—forms, navigation, layout—and borrow individual elements for the places where you want personality. Just route every borrowed element through the same token and accessibility checks, so it lands as part of your system rather than beside it.

The short version: open-source UI element libraries are a fast, flexible way to get good-looking interface pieces into a project. They are not a substitute for a design system, and the license and accessibility details are the part worth reading carefully.

Graph visualization is the process of drawing a graph — a set of vertices (nodes) connected by edges — as a diagram so you can see its structure and reason about it. You use it when you need to inspect relationships (routes, dependencies, networks) rather than read them from a table. On a tool like Graph Online (graphonline.top), you can build that graph in the browser, run algorithms such as shortest path, and export the result as an image or file. This article covers what the tool accepts as input, how to run shortest path, and the format errors that most often block a first attempt.

What graph visualization is used for

A graph is an abstract structure: vertices plus the edges between them. Visualization turns that structure into something you can look at, which matters because many graph properties are hard to spot in raw data but obvious in a picture.

Typical uses:

• Path and routing problems — find the shortest path between two vertices, e.g. a route between two locations.
• Connectivity checks — search connected components to see whether the graph splits into isolated groups.
• Structural summaries — compute an adjacency matrix, incidence matrix, or distance matrix to feed other tools.
• Optimization — find a minimum spanning tree to connect all vertices at minimum total edge weight.
• Traversal problems — look for an Eulerian cycle, which visits every edge exactly once.

The point of doing this online is that you skip installing and configuring graph software: you enter the graph, run the algorithm, and read the result in the same workspace.

Ways to enter a graph

Graph Online accepts several input methods, listed on the site as: using an adjacency matrix, using an incidence matrix, using an edge list, or starting from a graph example. You can also draw the graph directly in the workspace with Add vertex and Connect vertices.

For weighted graphs, the adjacency matrix holds edge weights; the site notes that a multigraph matrix contains the weight of the minimum edge between vertices.

Creating a graph and finding the shortest path

The site's heading for this workflow is Find shortest path, and the Help page links to a tutorial video. The general steps:

1. Choose an input method — adjacency matrix, incidence matrix, edge list, or draw manually.
2. Enter the data. For matrix input, use a comma as the separator. The matrix must be square (for the adjacency matrix).
3. Confirm the graph is created. If the format is wrong, the tool reports it rather than drawing a partial graph (see the error section below).
4. Select the algorithm. Open the Algorithms menu and choose shortest path.
5. Read the result in the workspace — the path is highlighted on the visualization.
6. Save or export if you need the result outside the browser.

Saving and exporting the result

The workspace offers several output options:

• Save graph image — a printed image of the graph.
• Save graph to SVG — vector output, useful if you need to scale or edit it.
• Workspace screenshot — captures the current view.
• Export to file / Import from file — move a graph between sessions.
• Save — the site confirms with a message and a link to view the saved graph, and the image is available at that link.

There is also a Paste your algorithm box: you paste an algorithm and press Run. Submitted algorithms are sent for checking and, if successful, added to the site.

Common input errors and how to fix them

Most first failures are format problems, not algorithm problems. The tool reports each one specifically:

• Adjacency matrix has wrong format — click fix matrix to attempt a fix, or open Help for the expected format.
• Incidence matrix has wrong format — same options: fix matrix or Help.
• Edge list has wrong format — click fix or open Help for the format.
• Matrix is incorrect — check that you used a comma as the separator.
• Matrix should be square — the adjacency matrix must have the same number of rows and columns.
• The graph is too large for this algorithm — the tool states the vertex and edge counts and the maximum size the algorithm supports. Reduce the graph or pick a different algorithm.

A practical rule: if the graph does not appear at all, the problem is almost always the input format, so check the separator and the square-matrix requirement before changing anything else.

Practical notes

• The workspace includes view controls (zoom in/out, zoom fit, 100%/50%/25%) and style options (Default, Night, Large, High Contrast), which help when a graph is dense or you need a readable export.
• Undo is available with Ctrl+Z.
• The site is open source and has a Wiki and News section, so you can check for changes or contribute.
• If something breaks, the page provides a contact address for reporting problems.

If your goal is simply to see a graph and get a shortest path, the fastest route is: enter an edge list or adjacency matrix, confirm the graph renders, then run shortest path from the Algorithms menu. If the graph fails to render, fix the format first — the error message tells you which of the three input types is malformed.