Skip to content

Commit

Permalink
add tip to diagram lib page (segmentio#675)
Browse files Browse the repository at this point in the history
* add tip

* tips

* finish fragment
  • Loading branch information
sanscontext authored Mar 3, 2020
1 parent 4310e77 commit 5ff42b8
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 2 deletions.
11 changes: 9 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,16 +112,23 @@ Destinations: These files also include "intelligent partials", which are section


## Formatting and Prettifying
Some important tips! We also have a Styleguide available so you can see how different formatting looks when rendered.
Some important tips! We also have a (rendering)[Formatting guide](/src/utils/formatguide.md) available so you can see how different formatting looks when rendered.

### Diagrams

We have a diagram library in sketch, which you can use to build pretty, on-brand architecture diagrams, etc. There's a [readme file in that directory](diagram-library/readme.md) with instructions on how to use it.

### Adding Images

**All images should be saved locally! No linking to 3rd party-hosted images!**

As CDN hosting is from the publish side, we shouldn't be worrying about that at the file level.

To add images to a docs page, create an `images` folder for the docs path, save the image to the folder and then reference it in your markdown file. The [Google Analytics destination](/src/connections/destinations/catalog/google-analytics) is a good example.

There are no naming conventions at this time. Anything you see with `asset` was dowloaded by a script to save it from Contents.io. :)
There are no _enforced_ naming conventions at this time. Files that start with an underscore are ignored by jekyll. Anything you see with `asset` was dowloaded by a script to save it from Contents.io. :)

In general, it's a good practice to name images with a description that helps you figure out where they should go within a page, or within a larger folder of images. Naming with a prefix of what application the screenshot contains can be helpful (for example `atom-new-file.png`, `atom-commit-changes.png` etc), or you can name images to describe a process flow (for example `checkout-1-add-to-cart.png`, `checkout-2-est-shipping.png` and so on).

### Adding links

Expand Down
5 changes: 5 additions & 0 deletions diagram-library/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ You can also export the file, or diagrams you make with it, to `.svg` format for
8. At the VERY end of the panel, find the **Export Selected** button, and click it.
9. If needed, move the resulting `.png` file to the correct `images` directory.
10. Add the new diagram in the markdown file, and run a test build to make sure your diagram is legible on the page!
(Don't forget to add the file in git!)

That's it!

Expand All @@ -30,3 +31,7 @@ When you need to update the images, you can reopen the Sketch file, make your ch
## Adding new items to the Library

Contact @sanscontext for instructions. :)

## More reading on diagrams and diagram best practices

https://blog.ilograph.com/posts/diagram-mistakes/

0 comments on commit 5ff42b8

Please sign in to comment.