https://codeberg.org/nilesh/grapher

This website works better with JavaScript.
#
Codeberg
Community Issues Documentation Blog
Donate Join / Support
Contact
Explore Help
Register Sign In
nilesh
/
grapher  
Watch 1
Star 0
Fork
You've already forked grapher
1
Code Issues 3 Pull Requests Projects Releases Wiki Activity
SVG-based interactive graph dataset editor. Powers Foresight
Institute's civilizational tech trees: https://foresight.org/
tech-tree/ https://grapherx.netlify.app/
You can not select more than 25 topics Topics must start with a
letter or number, can include dashes ('-') and can be up to 35
characters long.
175 Commits
2 Branches
0 Tags
1.3 MiB
Svelte 65%
JavaScript 29.9%
HTML 4.1%
CSS 1%
 
 
 
 
Tag: Branch: Tree: main
main
v2
[                    ]
Branches Tags
${ item.name }
 
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
  
HTTPS [https://codeberg.org]
Download ZIP Download TAR.GZ Download BUNDLE Clone in VS Code

                  # Nilesh c0f7eb9eee                    2 days ago
         v221102: Scrolling fix for ItemEditor
public            Fix scroll overflow                   5 days ago
scripts           Script to merge graphs                2 months ago
src               v221102: Scrolling fix for ItemEditor 2 days ago
.gitignore        first commit                          5 months ago
LICENSE.md        Changed package name                  3 months ago
README.md         move README image to Codeberg         3 days ago
package-lock.json quickstart                            3 months ago
package.json      Changed package name                  3 months ago
rollup.config.js  json editor + misc                    5 months ago

README.md

Grapher

image

This is an SVG-based interactive graph dataset editor that allows you
to manually lay out nodes and edges but at the same time produce a
clean graph-like JSON that can be consumed easily with libraries like
Cytoscape JS. You can add arbitrary data fields at nodes and edges.
The code is declarative and minimal enough that it can be tweaked
easily to give your users an interactive diagram.

Graphs can be saved in a .graph file which stores the array of nodes
and edges and some other metadata in JSON format. To see an example
of page where this .graph gets pre-loaded, see index.html. The page
can also enable/disable features of the editor via
window.overrideOptions. We use this to build a separate "editor" mode
where any changes made by the users are saved automatically in
browser's localStorage.

QuickStart

npm install
npm audit fix
npm run build
npm run dev

Features

  * Infinite panning and zooming
  * Loading from and saving to a clean JSON-based file format to
    easily process the graph in your applications.
  * Exporting to Cytoscape format or SVG.
  * Themability with 4 pre-defined themes.
  * Edges can be straight, curved or orthogonal.
  * Node description can be markdown including links.
  * Custom JSON data fields can be assigned at each node and edge.
  * Nodes can be given badges and user can rotate through them by
    clicking.
  * Node can be highlighted by tags.
  * Collapsible parent nodes in zommed-out mode
  * Select and move multiple nodes at once
  * Alignment / snap-to-grid

Built with

  * SvelteJS for reactivity
  * Shoelace.Style for misc WebComponents

Related Tools

  * PRSM
  * JointJS

English
Bahasa Indonesia Deutsch English Espanol Francais Italiano Latviesu 
Magyar nyelv Nederlands Polski Portugues de Portugal Portugues do
Brasil Suomi Svenska Turkce Cestina Ellenika B'lgarski Russkii Srpski
Ukrayins'ka frsy mlyaallN Ri Ben Yu Jian Ti Zhong Wen Fan Ti Zhong Wen (Tai Wan )Fan Ti Zhong Wen (Xiang Gang ) 
hangugeo
Licenses API Privacy Policy Bylaws/Satzung Imprint/Impressum Terms of
Use Report Abuse