Skip to content

Commit 49da27f

Browse files
committed
Add screen captures for Linux, and change the preferred typeface to Helvetica because it's sans serif, and improve some texts
Signed-off-by: Jim Hawkins <[email protected]>
1 parent c5139ec commit 49da27f

5 files changed

+20
-9
lines changed

documents/Specification/EditingGuide/readme.md

+20-9
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ desktop app edition, and an unofficial plugin for VSCode and VSCodium.
1414
exporting to .svg format. However, it seems necessary to export in order to
1515
support dark mode in GitHub.
1616

17-
This screen capture shows the correct save-as option in the desktop tool
18-
for macOS.
17+
These screen captures show the correct save-as option in the desktop tools
18+
for macOS and Linux.
1919

20-
![](Screen_DiagramsDotNetDesktop_SaveAsEditiable-SVG.png)
20+
![](Screen_DiagramsDotNetDesktop-macOS_SaveAsEditiable-SVG.png)
21+
22+
![](Screen_DiagramsDotNetDesktop-Linux_SaveAsEditiable-SVG.png)
2123

2224
- Make diagrams that support dark mode by removing these declarations from the
2325
style of individual graphic elements.
@@ -28,8 +30,12 @@ desktop app edition, and an unofficial plugin for VSCode and VSCodium.
2830
Or you can set them to `default`. See also this SO question and answer.
2931
[https://stackoverflow.com/questions/75950638/automatic-fill-colour-but-opposite-to-theme-in-diagrams-net-aka-draw-io](https://stackoverflow.com/questions/75950638/automatic-fill-colour-but-opposite-to-theme-in-diagrams-net-aka-draw-io)
3032

31-
- Use the typeface `Verdana` for all fonts. That typeface is included in the
32-
tool by default and shouldn't require downloading or embedding.
33+
- Use the typeface `Helvetica` for all text in diagrams. That typeface is
34+
included in both the desktop tool and the plugin by default and shouldn't
35+
require downloading or embedding.
36+
37+
The standalone tool, at least for Linux, doesn't support
38+
[Google Fonts](https://fonts.google.com/), although the plugin does.
3339

3440
# How to add images with dark mode support
3541
Check these notes for how to add images to the Markdown so that GitHub renders
@@ -39,7 +45,12 @@ them correctly in dark mode.
3945

4046
Dark mode export is only available if the tool is running in dark mode.
4147

42-
![](Screen_DiagramsDotNetDesktop_ExportAs-SVG-DarkMode.png)
48+
These screen captures show the required export parameters as they might
49+
appear in the desktop tools for macOS and Linux.
50+
51+
![](Screen_DiagramsDotNetDesktop-macOS_ExportAs-SVG-DarkMode.png)
52+
53+
![](Screen_DiagramsDotNetDesktop-Linux_ExportAs-SVG-DarkMode.png)
4354

4455
See also this article on their website.
4556
[https://www.drawio.com/blog/dark-mode-diagram-editor](https://www.drawio.com/blog/dark-mode-diagram-editor)
@@ -65,11 +76,11 @@ them correctly in dark mode.
6576

6677
Note that the `source` and `img` tags don't have to be self-closing; there's
6778
no oblique before the tag close like this ` />`. That's because they are
68-
HTML void elements. For discussion of that type of element, see for example
79+
HTML void elements. For a discussion of that type of element, see for
80+
example
6981
[developer.mozilla.org/.../Void_element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element).
7082

71-
See
72-
https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to
83+
See [docs.github.com/...writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to)
7384
for official instructions.
7485

7586
- You can make GitHub load in light or dark mode in Chrome for macOS by

0 commit comments

Comments
 (0)