Skip to content

Commit

Permalink
docs(readme): improve readme
Browse files Browse the repository at this point in the history
  • Loading branch information
donroyco committed Oct 12, 2018
1 parent 9a71276 commit a50f6a6
Show file tree
Hide file tree
Showing 7 changed files with 26 additions and 25 deletions.
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -7,3 +7,4 @@ build
dist
deploy.sh
deploy-toolkit.yaml
.idea
50 changes: 25 additions & 25 deletions README.md
@@ -1,14 +1,14 @@
![](assets/GraphQL_header.jpg)
![GraphQLEditor Editor](assets/graphql-header.jpg)

Graphql editors makes it easier to understand graphql schema. Create schema by joining visual blocks. GraphQLEditor will transform them into code.
GraphQLEditor makes it easier to understand GrapHQL schemas. Create a schema by joining visual blocks. GraphQLEditor will transform them into code.

With GraphQLEditor you can create visual diagrams without writing any code.

![](assets/GraphQL_features.jpg)
![GraphQLEditor Features: GraphQL Super Easy, Think Visually, No Code Solution, Tool For Business Managers, Complex GraphQL Code, Merge All Query and Mutations](assets/graphql-features.jpg)

## Live Demo [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=First%20visual%20GraphQL%20Editor&url=https://github.com/slothking-online/graphql-editor)

Here is [Live demo](https://demo.graphqleditor.com) of GraphQLEditor
Here is a [live demo](https://demo.graphqleditor.com) example of GraphQLEditor.

## Cloud Backend

Expand Down Expand Up @@ -37,48 +37,48 @@ $ npm install
$ npm run start
```

After that you should have editor running on
After that the editor should be running on localhost:
```
http://localhost:1569
```

## How it works
## How It Works

Create GraphQL nodes and connect them to generate database schema.
Create GraphQL nodes and connect them to generate a database schema.

![](giflq.gif)
![GraphQLEditor GIF showing how to connect nodes](assets/graphl-features-gif.gif)

To create nodes press and hold spacebar then hover mouse button on chosen category. Click the mouse button on node to create it. Connect nodes with each other.
To create nodes press and hold *spacebar*, then hover mouse button on chosen category. Click the mouse button on node to create it. Connect nodes with each other.

### Controls

- Create - press and hold Spacebar and choose category -> node and Left Mouse Button click
- Pan - press and hold Left Mouse Button and move mouse
- Move - press and hold Left Mouse Button on node
- Rename - To rename node simply start typing when one node is selected
- Connect - Click and hold desired node output and move it to other node's output then release mouse button
IMPORTANT: Every node is connectable only if it creates valid schema. Experiment to test
- Node Properties - Click right mouse button on node
- CMD/CTRL + Left Mouse Button Click - select multiple nodes
- Delete - Click delete button when node/nodes are selected or right click -> delete
- **Create** - Press and hold *spacebar* and choose *category* Β» *node* and *Left Mouse Button click*
- **Pan** - Press and hold *Left Mouse Button* and move mouse
- **Move** - Press and hold *Left Mouse Button* on node
- **Rename** - To rename node simply start typing when one node is selected
- **Connect** - Click and hold desired node output and move it to other node's output then release mouse button
IMPORTANT: Every node is connectable only if it creates a valid schema. Experiment to test it.
- **Node Properties** - Click right mouse button on node
- ⌘/Ctrl + *Left Mouse Button click* - select multiple nodes
- **Delete** - Click *delete* button when node/nodes are selected or right click Β» *delete*

### Small tutorial
### Small Tutorial

1. Create graph -> "type" node
1. Create *graph* Β» *type* node
2. Rename it to "Cat"
3. Create fields -> "String" node
3. Create *fields* Β» *"String"* node
4. Rename it to "name"
5. Connect "name"

## Contribute

Feel free to contact us and contribute in graphql editor project. aexol@aexol.com
Feel free to contact us and contribute in this GraphQL Editor project. aexol@aexol.com

1. fork this repo
1. Fork this repo
2. Create your feature branch: git checkout -b feature-name
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

![](assets/roadmap_graphql_header.jpg)
![](assets/roadmap_graphql_features.jpg)
![GraphQLEditor Roadmap](assets/roadmap-graphql-header.jpg)
![GraphQLEditor Roadmap Features: Generate Queries For Frontend, GraphQL To Backend, Ready To Use Fake Backend, Backend In One place](assets/roadmap-graphql-features.jpg)
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes

0 comments on commit a50f6a6

Please sign in to comment.