Added drawing docs page

diff --git a/content/docs/user/diagrams.md b/content/docs/user/diagrams.md
new file mode 100644 (file)
index 0000000..b204ea2
--- /dev/null
+++ b/content/docs/user/diagrams.md
@@ -0,0 +1,48 @@
++++
+title = "Drawings & Diagrams"
+description = "Inserting and managing drawings within BookStack"
+date = "2022-10-28"
+type = "user-doc"
++++
+
+BookStack has built-in support for creating and editing drawings via integrating with [diagrams.net](https://www.diagrams.net/).
+This integration provides very powerful drawing/diagram editing capabilities for a range of use-cases.
+By default BookStack will use the online version of diagrams.net but this is [configurable by an admin](/docs/admin/other-config/#custom-diagramsnet-url).
+
+### Inserting, Editing & Managing Drawings
+
+#### WYSIWYG Editor
+
+When using the WYSIWYG editor, drawings can be created & inserted into the page via a button in the editor toolbar.
+The button is located in an overflow menu that's within the same section as tables and links:
+
+![View of the WYSWIYG editor toolbar with the drawing button highlighted](/images/docs/user/drawing-wysiwyg-insert.png)
+
+To open an existing drawing for editing, simply double click on the drawing within the editor.
+Alternatively you can press the toolbar drawing button while a drawing is selected.
+When you edit an existing drawing and save, the new version is saved as a separate image file by BookStack, instead of overwriting existing drawings.
+This is to allow proper revision history with old drawings intact.
+
+Existing drawing files can be re-used or deleted via the drawing manager. This can be accessed via the dropdown that sits next
+to the editor drawing toolbar button:
+
+![Drawing managed popup view showing a grid of drawing thumbnails](/images/docs/user/drawing-manager.png)
+
+#### Markdown Editor
+
+Within the markdown editor you can insert a drawing using the action found above the markdown content:
+
+![View of the Markdown editor with an "Insert Drawing" action highlighted](/images/docs/user/drawing-insert-markdown.png)
+
+To open an existing drawing for editing, just double click the image within the preview window and the existing drawing should be 
+opened for editing.
+When you edit an existing drawing and save, the new version is saved as a separate image file by BookStack, instead of overwriting existing drawings.
+This is to allow proper revision history with old drawings intact.
+
+### Drawing Image File Storage & Format
+
+Drawings files created via the diagrams.net integration are saved to your own BookStack system, using the same storage mechanism as configured for normal images.
+
+For portability & compatibility, drawings are saved in PNG file format, with the original diagrams.net drawing data embedded within.
+Since the drawing data is embedded with the PNG image file, you can continue editing such drawings in any diagrams.net instance just by dragging-in or 
+importing the image file.
\ No newline at end of file

diff --git a/static/images/docs/user/drawing-insert-markdown.png b/static/images/docs/user/drawing-insert-markdown.png
new file mode 100644 (file)
index 0000000..c287245
--- /dev/null
+++ b/static/images/docs/user/drawing-insert-markdown.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f0efb0fe400f8e84270a392127a5bc6185385f8b321761e29a0977279d76bff3
+size 46780

diff --git a/static/images/docs/user/drawing-manager.png b/static/images/docs/user/drawing-manager.png
new file mode 100644 (file)
index 0000000..ce6765a
--- /dev/null
+++ b/static/images/docs/user/drawing-manager.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7a3201da8d089ef10e948b39318357210096eac119377c0c9aec191d2ef811d8
+size 131812

diff --git a/static/images/docs/user/drawing-wysiwyg-insert.png b/static/images/docs/user/drawing-wysiwyg-insert.png
new file mode 100644 (file)
index 0000000..15c4b4e
--- /dev/null
+++ b/static/images/docs/user/drawing-wysiwyg-insert.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:756c21760f2ea58d1e163a99d31bbf7bb2285eb35ea2f3b8e513bbc0ad1a8fce
+size 26850

diff --git a/themes/bookstack/layouts/partials/menu_user_docs.html b/themes/bookstack/layouts/partials/menu_user_docs.html
index dc63ecc16cfa4913458c4da0649852864c143ce3..e87a585178f0532faf7f7d58c8addf57fc4f88c1 100644 (file)
--- a/themes/bookstack/layouts/partials/menu_user_docs.html
+++ b/themes/bookstack/layouts/partials/menu_user_docs.html
@@ -12,13 +12,14 @@
                <li><a href="/docs/user/searching">Searching Content</a></li>
                <li><a href="/docs/user/wysiwyg-editor">Default (WYSIWYG) Editor</a></li>
                <li><a href="/docs/user/markdown-editor">Markdown Editor</a></li>
+               <li><a href="/docs/user/diagrams">Drawings & Diagrams</a></li>
        </ul>
 </div>
 
 <div>
        <h4>Advanced Features</h4>
        <ul>
-               <li><a href="/docs/user/roles-and-permissions">Roles and Permissions</a></li>
+               <li><a href="/docs/user/roles-and-permissions">Roles & Permissions</a></li>
                <li><a href="/docs/user/reusing-page-content">Reusing Page Content</a></li>
                <li><a href="/docs/user/content-permalinks">Page Permalinks</a></li>
        </ul>