Add Diagram (#108)

Author: LanaDX

interface-elements-for-web/articles/diagram.md

@@ -0,0 +1,19 @@
+---
+title: Diagram
+author: Svetlana Nikulina
+---
+# Diagram
+
+The **Diagram** tool allows you to design diagrams, flowcharts, and organizational charts online. 
+
+![Diagram](../images/diagram-overview.png)
+
+
+* [First Look at the Diagram](diagram/first-look-at-the-diagram.md)
+* [Create a New Chart](diagram/create-a-new-chart.md)
+* [Select Elements](diagram/select-elements.md)
+* [Work with Chart Elements](diagram/work-with-chart-elements.md)
+* [Chart Layout](diagram/chart-layout.md)
+* [Page Settings](diagram/page-and-view-settings.md)
+* [Export to an Image](diagram/export-to-an-image.md)
+* [Keyboard Shortcuts](diagram/keyboard-shortcuts.md)

interface-elements-for-web/articles/diagram/chart-layout.md

@@ -0,0 +1,20 @@
+---
+title: Chart Layout
+author: Svetlana Nikulina
+---
+# Chart Layout
+The **Diagram** tool creates a chart layout based on predefined algorithms:
+
+
+- The **Tree** layout algorithm is used to draw hierarchical diagrams. It arranges shapes in a tree structure and aligns them based on their hierarchical level.
+
+- The **Layered** layout algorithm is used to draw layered graphs. It arranges shapes in horizontal rows or layers to reduce the number of connector crossings.
+
+To select your chart's layout type and direction, click a layout command on the **Properties > Layout** tab. 
+
+
+![Layout](../../images/diagram-layout.png)
+
+If your document contains several unconnected charts, you can specify a layout for a particular chart. Select the chart's element (shape or connector) and click a layout command. The **Diagram** tool rebuilds the layout of a chart to which the selected element belongs.
+
+![Layout](../../images/diagram-layout-with-selection.png)

interface-elements-for-web/articles/diagram/create-a-new-chart.md

@@ -0,0 +1,73 @@
+---
+title: Create a New Chart
+author: Svetlana Nikulina
+---
+# Create a New Chart
+This topic explains how to create a new chart and customize its settings.
+
+## Add a Shape
+
+1. Drag a shape from the **Toolbox** onto the page.
+
+1. Double click the shape to add/edit its text.
+
+![Add a Shape](../../images/diagram-add-shape.gif)
+
+## Connect Shapes
+
+1. Add another shape to the chart.
+
+1. Hover the mouse pointer over a shape to display its connection points.
+
+
+1. Hover a point, press the left mouse button, drag the connector to another shape's connection point, and release the mouse button. Now, if you move a shape, the connector stretches to it.
+
+
+1. Double click the connector to add text. You can use the mouse to move the text along the connector.
+
+
+![Add a Connector](../../images/diagram-add-connector.gif)
+
+## Place a Shape Into a Container
+
+You can arrange shapes into collapsible horizontal and vertical containers.
+
+Drag a shape over a container (this highlights the container) and drop the shape.
+
+
+![Container](../../images/diagram-container.gif)
+
+## Resize a Shape
+
+1. Click a shape to select it. 
+
+1. Drag the squares at the shape's borders and corners to resize the shape.
+
+
+![Resize a Shape](../../images/diagram-resizing.gif)
+
+## Insert an OrgChart Shape (Shape with Image)
+
+1. Drag a shape from the **Org Chart** toolbox group onto the page.
+
+1. Double click the shape to change its text.
+
+
+1. Right click the shape to invoke the context menu. Select the **Insert Shape Image...** command. 
+
+1. Select the shape image and click OK.
+
+To change or delete the image, select the corresponding command in the context menu.
+
+![OrgChart Card](../../images/diagram-orgchart.gif)
+
+## Customize Shape and Connector Style Settings
+
+1. Select a shape, connector, or group of elements.
+
+
+1. Click the **Properties** button to invoke the **Properties** toolbar.
+
+1. Use the editors on the **Style** tab to customize style settings.
+
+![Customization](../../images/diagram-customization.gif)

interface-elements-for-web/articles/diagram/export-to-an-image.md

@@ -0,0 +1,14 @@
+---
+title: Export to an Image
+author: Svetlana Nikulina
+---
+# Export to an Image
+
+The **Diagram** tool can export its content to the following image formats: 
+- PNG
+- JPEG
+- SVG
+
+Click the **Export** command on the **View** toolbar and select a format to download the document.
+
+![Export](../../images/diagram-export.png)

interface-elements-for-web/articles/diagram/first-look-at-the-diagram.md

@@ -0,0 +1,57 @@
+---
+title: First Look at the Diagram
+author: Svetlana Nikulina
+---
+# First Look at the Diagram
+
+![Tools](../../images/diagram-tools.png)
+
+## Diagram Tools
+
+- The **History** toolbar contains **Undo** and **Redo** commands that allow you to undo and redo actions. On mobile devises, the toolbar also displays the **Show Toolbox** button that shows/hides the **Toolbox**.
+
+    ![Show Toolbox Button](../../images/diagram-history-and-toolbox-button.png)
+
+- The **Toolbox** allows you to add shapes to your chart. Select **View** > **Settings** > **Show Toolbox** to change the **Toolbox**'s visibility. On mobile devises, there is an additional **Show Toolbox** button in the **History** toolbar.
+
+
+- The **Properties** toolbar allows you to [customize shape and connector style settings](create-a-new-chart.md#customize-shape-and-connector-style-settings), change the [chart layout](chart-layout.md), and specify [page settings](page-and-view-settings.md). Click the **Properties** button to display the toolbar.
+
+- The **View** toolbar contains commands related to the **Diagram**'s [view settings](page-and-view-settings.md).
+
+- You can use the **Context Toolbox** to [create a shape at the end of a connector](work-with-chart-elements.md#create-a-shape-via-the-context-toolbox).
+
+    ![Context Toolbox](../../images/diagram-context-toolbox.png)
+
+- The **Context Menu** appears when you right-click a chart element.
+
+    ![Context Menu](../../images/diagram-context-menu.png)
+
+    On mobile devises, tap a chart element to display the **Context Menu**. 
+
+    ![Mobile Context Menu](../../images/diagram-mobile-context-menu.png)
+
+    The table below lists the menu commands.
+
+    | Icon | Text | Description |
+    |---|---|---|
+    | ![](../../images/diagram-cm-cut.png) | Cut | Cuts the selected elements. |
+    | ![](../../images/diagram-cm-copy.png) | Copy | Copies the selected elements to the clipboard. |
+    | ![](../../images/diagram-cm-paste.png) | Paste | Pastes the copied elements from the clipboard. |
+    | ![](../../images/diagram-cm-delete.png) | Delete | Deletes the selected elements. |
+    | ![](../../images/diagram-cm-select-all.png) | Selects All | Select all elements in the document. |
+    | ![](../../images/diagram-cm-front.png) | Bring to Front | Moves the selected elements on top of other overlapping elements. |
+    | ![](../../images/diagram-cm-back.png) | Send to Back | Moves the selected elements behind other overlapping elements. |
+    | ![](../../images/diagram-cm-lock.png) | Lock | Locks the selected elements.|
+    | ![](../../images/diagram-cm-unlock.png) | Unlock | Unlocks the selected elements. |
+    | ![](../../images/diagram-cm-insert-image.png) | Insert Shape Image... | Shows **Insert Image** dialog. |
+    | ![](../../images/diagram-cm-change-image.png) | Change Shape Image... | Shows **Change Image** dialog.  |
+    | ![](../../images/diagram-cm-delete-image.png) | Delete Shape Image | Deletes an image from the selected shape. |
+
+## Chart Elements
+
+![Chart Elements](../../images/diagram-chart-elements.png)
+
+- **Shape** - a base chart element.
+- **Connector** - a line that connects shapes. If you move a shape, the connector stretches to it.
+- **Chart** - a group of shapes linked by connectors. A document can contain several unconnected charts.

interface-elements-for-web/articles/diagram/keyboard-shortcuts.md

@@ -0,0 +1,30 @@
+---
+title: Keyboard Shortcuts
+author: Svetlana Nikulina
+---
+# Keyboard Shortcuts
+
+The table below lists key combinations available in the **Diagram** tool.
+
+| Shortcut | Description |
+|---|---|
+| Left arrow key | Moves the selected elements one grid cell to the left. |
+| Right arrow key | Moves the selected elements one grid cell to the right. |
+| Up arrow key | Moves the selected elements one grid cell up. |
+| Down arrow key | Moves the selected elements one grid cell down. |
+| Shift + Left arrow key | Moves the selected elements one pixel to the left. |
+| Shift + Right arrow key | Moves the selected elements one pixel to the right. |
+| Shift + Up arrow key | Moves the selected elements one pixel up. |
+| Shift + Down arrow key | Moves the selected elements one pixel down.  |
+| Ctrl+A | Selects all chart elements in the document. |
+| Ctrl+C | Copies the selected elements to the clipboard. |
+| Ctrl+V | Pastes the copied elements from the clipboard. |
+| Ctrl+X | Cuts the selected elements. |
+| Delete | Deletes the selected elements. |
+| Ctrl+Z | Undoes the last action. |
+| Ctrl+Y | Redoes the last undone action. |
+| Ctrl+B | Applies bold formatting to the selected text. |
+| Ctrl+I | Applies italic formatting to the selected text. |
+| Ctrl+U | Underlines the selected text. |
+| Ctrl+Enter | Finishes shape/connector text editing. |
+| F11 |	Switches to full screen. |

interface-elements-for-web/articles/diagram/page-and-view-settings.md

@@ -0,0 +1,32 @@
+---
+title: Page and View Settings
+author: Svetlana Nikulina
+---
+# Page and View Settings
+
+The **Diagram** tool divides the work area into pages. Use the commands on the **Properties > Diagram** tab to specify a page's size, orientation, and color.
+
+![Page and View Settings](../../images/diagram-page-settings.png)
+
+## Simple View
+In simple view mode, the **Diagram** tool does not divide the work area into pages and a content occupies all the available work area.
+
+To switch to simple view mode, select the **Simple View** command on the **View** toolbar.
+
+![Simple View](../../images/diagram-simple-view.png)
+
+## Grid Settings
+
+Use the following commands on the **View** toolbar to control grid settings.
+
+- **Show Grid** - controls the grid visibility.
+- **Snap to Grid** - specifies whether shapes and connectors are snapped to the grid.
+
+![Grid Settings](../../images/diagram-grid-settings.png)
+
+## Full Screen
+
+To switch to full screen mode, click the **Full Screen** command on the **View** toolbar or press F11 while the **Diagram** tool has focus.
+
+![Full Screen](../../images/diagram-full-screen.png)
+

interface-elements-for-web/articles/diagram/select-elements.md

@@ -0,0 +1,22 @@
+---
+title: Select Elements
+author: Svetlana Nikulina
+---
+# Select Elements
+
+- Click a shape or connector to select it.
+
+- Click an element while holding down the Shift key to toggle the element's selected state.
+
+## Select Multiple Elements
+
+To select multiple elements do one of the following.
+
+- Click elements while holding down the Shift key.
+- Drag a mouse over elements while holding down the left mouse button. Elements that are inside or cross the selection area, will be selected.
+
+![Selection](../../images/diagram-selection.png)
+
+## Select All
+
+Press Ctrl+A to select all elements in the document.