{"id":34751471,"url":"https://github.com/tone-row/graph-selector","last_synced_at":"2025-12-25T05:19:58.530Z","repository":{"id":58150419,"uuid":"526635115","full_name":"tone-row/graph-selector","owner":"tone-row","description":"Graph Selector is a language for describing graphs (nodes and edges) and storing arbitrary data on those nodes and edges in plaintext.","archived":false,"fork":false,"pushed_at":"2025-01-28T21:21:40.000Z","size":936,"stargazers_count":52,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-09-30T00:38:10.011Z","etag":null,"topics":["dsl","graph","graphs","language","parser","syntax"],"latest_commit_sha":null,"homepage":"https://graph-selector-syntax.tone-row.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tone-row.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["tone-row"]}},"created_at":"2022-08-19T14:16:13.000Z","updated_at":"2025-09-28T03:51:40.000Z","dependencies_parsed_at":"2023-02-16T08:30:45.194Z","dependency_job_id":"aba6439a-b8ec-4aa2-a2a6-ac59d209efa8","html_url":"https://github.com/tone-row/graph-selector","commit_stats":{"total_commits":168,"total_committers":2,"mean_commits":84.0,"dds":"0.11904761904761907","last_synced_commit":"261912099176041e5cc6e81b5b7b78cacd280205"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tone-row/graph-selector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tone-row%2Fgraph-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tone-row%2Fgraph-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tone-row%2Fgraph-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tone-row%2Fgraph-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tone-row","download_url":"https://codeload.github.com/tone-row/graph-selector/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tone-row%2Fgraph-selector/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28020388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dsl","graph","graphs","language","parser","syntax"],"created_at":"2025-12-25T05:19:57.734Z","updated_at":"2025-12-25T05:19:58.521Z","avatar_url":"https://github.com/tone-row.png","language":"TypeScript","funding_links":["https://github.com/sponsors/tone-row"],"categories":[],"sub_categories":[],"readme":"# Graph Selector\n\n![Version](https://img.shields.io/npm/v/graph-selector)\n![Coverage](https://img.shields.io/codecov/c/github/tone-row/graph-selector)\n![License](https://img.shields.io/github/license/tone-row/graph-selector)\n![Build](https://img.shields.io/github/checks-status/tone-row/graph-selector/main)\n\nGraph Selector is a language for describing graphs (nodes and edges) and storing arbitrary data on those nodes and edges in plaintext.\n\n## 💫 Check out the Demos\n\nVisit the demo page at [graph-selector-syntax.tone-row.com](http://graph-selector-syntax.tone-row.com/) to see how it works.\n\n## Introduction\n\nGraph Selector is a syntax for defining graphs and the data associated with them. Graphs are defined in plain-text and can be parsed into a programmable JavaScript object. This makes it easier for developers to work with graphs when building applications like web applications, database applications, and process-visualization systems.\n\nGraph Selector uses indentation and context-free grammars to create edges between nodes and store data. It also has features like matchers and models to make modeling complex graphs easier and faster.\n\n## Usage\n\nYou can use Graph Selector in your projects by installing it using npm:\n\n```bash\nnpm install graph-selector\n```\n\nYou can then use Graph Selector in your code to parse Graph Selector strings:\n\n```js\nimport { parse } from \"graph-selector\";\n\nconst graph = parse(`\nNode A\n  goes to: Node B\n`);\n\nconst { nodes, edges } = graph;\n\n// do something with nodes and edges...\n```\n\n## Language Overview\n\nGraph Selector has a few rules that make it easy to understand and use:\n\nIndentation is used to create edges between nodes.\n\n```\nNode A\n  Node B\n```\n\nThis creates an edge from Node A to Node B.\n\nEdge info is stored before a colon (`:`) and is separated from the node info by a space.\n\n```\nNode A\n  goes to: Node B\n```\n\nThis creates an edge from Node A to Node B with the label `goes to`.\n\nData can be stored on the nodes and edges using CSS Selector syntax. For example, `#id.class1.class2[n=4][m]` would be parsed into:\n\n```js\n{\n  \"id\": \"id\",\n  \"classes\": \".class1.class2\",\n  \"n\": 4,\n  \"m\": true\n}\n```\n\nParentheses can be used to reference nodes that have already been declared.\n\n```\na\nb  #id\nc .class\nd\n  (a)\n  (#id)\n  (.class)\n```\n\nThis creates a graph with 4 nodes and 3 edges.\n\n## Monaco Editor\n\nGraph Selector has an export named `highlight` which contains a lot of the tools for using this language with the [Monaco Editor]([https://www.npmjs.com/package/@monaco-editor/react](https://github.com/microsoft/monaco-editor)). Check out this for a complete example of using this language in a Monaco editor in React, with syntax highlighting and error reporting: https://stackblitz-starters-me6lmw.stackblitz.io\n\n## Errors\n\nIn order to capture and display parsing errors in the editor, errors conform to the type `ParsingError` in `graph-selector/src/ParseError.ts`. Because in most application we imagine parsing will occur outside of the editor, displaying errors must also happen outside the error. Refer to the monaco example for what this looks like.\n\n## Context\n\nIf you would like to find out more about the development and thought process behind this language, [A blog post](https://tone-row.com/blog/graph-syntax-css-selectors) has been published.\n\n## Contributing\n\nConstructive feedback on the syntax and how it can be improved is the primary contribution sought by this project. You can contribute by having a discussion via Github discissions or opening an issue. Additionally, pull requests will be welcomed to help make the project more robust and flexible for developers.\n\nYou can also contribute examples that show how Graph Selector can be used to render various types of graphs with a variety of libraries, including [D3](https://d3js.org/), [Cytoscape JS](https://js.cytoscape.org/), and [Recharts](https://recharts.org/).\n\n## Developing\n\nClone the repo, then install dependencies with `pnpm install`. You can then start both the parser and the examples website with `pnpm dev`.\n\n## Goals\n\nThe goal of this project is to become stable enough to migrate the [Flowchart Fun](https://flowchart.fun) website to this syntax and use it as the basis for a new version.\n\n### Next Steps\n\n- ~~Add syntax highlighter packages that can be used with Monaco \u0026 CodeMirror.~~\n- Add benchmarks\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftone-row%2Fgraph-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftone-row%2Fgraph-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftone-row%2Fgraph-selector/lists"}