Skip to content

Add diagram library #548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sanscontext merged 3 commits into from
Jan 23, 2020
Merged

Add diagram library #548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b56dca
checking in file
Jan 22, 2020
2f2d043
add instructions, exclude .sketch files
Jan 23, 2020
3799a86
Merge branch 'master' into add-diagram-library
Jan 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ source: ./src

permalink: /:categories/:title/

exclude: ['js', '_site']
exclude: ['js', '_site' '*.sketch']
# Build settings
markdown: kramdown
highlighter: rouge
Expand Down
25 changes: 25 additions & 0 deletions diagram-library/howto.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# The Segment Diagram Library

The library file was built by Tonik, and is in Sketch. You'll need a Sketch license to edit the file.

You can also export the file, or diagrams you make with it, to `.svg` format for storage.

## Using the Library

1. To create a new diagram, open the library file in Sketch and **make a copy**.
2. Rename the copy so it's specific to the project you're working on.
*Don't* use the base library file itself for this.
3. Optionally, save the Sketch file to the `images` directory for the file you'll be putting this diagram in, so it's easier to find later.
Jekyll _should_ exclude Sketch files from the build. You can also name the file with an underscore as the first character to exclude it from the build. If you have more than 3 sketch files for a specific doc, you can create a folder called `_src` in the `images` directory.
4. In Sketch, create a new Artboard. (Press A and drag a box on the screen.)
This is the canvas where you'll put items from the library, and represents an area that you can export as an image.
5. Make your diagram! Don't forget to save frequently.
6. When you're ready to export, select the artboard by clicking it in the left layers navigation, and find the **Export** panel at the end of the right tool pane.
7. Select **1x** (Apple Retina screens support 2x but it's not necessary) and `.png` format.
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!

That's it!

When you need to update it, you can reopen the sketch file, make your changes, and re-export.