mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-25 12:18:47 +08:00
121 lines
9.4 KiB
HTML
121 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Create and insert diagrams</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="description" content="If you need to create a lot of various and complex diagrams, ONLYOFFICE Document Editor provides you with a draw.io plugin that can create and configure such diagrams" />
|
|
<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
|
|
<link type="text/css" rel="stylesheet" href="../../../../../../common/main/resources/help/editor.css" />
|
|
<script type="text/javascript" src="../callback.js"></script>
|
|
<script type="text/javascript" src="../../../../../../common/main/resources/help/search/js/page-search.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="mainpart">
|
|
<div class="search-field">
|
|
<input id="search" class="searchBar" placeholder="Search" type="text" onkeypress="doSearch(event)">
|
|
</div>
|
|
<h1>Create and insert diagrams</h1>
|
|
<p>If you need to create a lot of various and complex diagrams, ONLYOFFICE <a href="https://www.onlyoffice.com/en/document-editor.aspx" target="_blank" onclick="onhyperlinkclick(this)"><b>Document Editor</b></a> provides you with a draw.io plugin that can create and configure such diagrams.</p>
|
|
<p class="note">Starting with ONLYOFFICE Docs 8.2, no plugins come with the editors by default. The plugins shall be installed via <a href="https://helpcenter.onlyoffice.com/ONLYOFFICE-Editors/Editors-User-Guides/AllEditors/Plugin-manager.aspx" target="_blank">Plugin Manager</a>.</p>
|
|
<ol>
|
|
<li>Select the place on the page where you want to insert a diagram.</li>
|
|
<li>Switch to the <b>Plugins</b> tab and click <div class="icon icon-drawio"></div> <b>draw.io</b>.</li>
|
|
<li>
|
|
<b>draw io</b> window will open containing the following sections:
|
|
<ul>
|
|
<li><b>Top toolbar</b> contains tools to manage files, configure interface, edit data via <em>File</em>, <em>Edit</em>, <em>View</em>, <em>Arrange</em>, <em>Extras</em>, <em>Help</em> tabs and corresponding options.</li>
|
|
<li><b>Left sidebar</b> contains various forms to select from: <em>Standard</em>, <em>Software</em>, <em>Networking</em>, <em>Business</em>, <em>Other</em>. To add new shapes to those available by default, click the <b>More Shapes</b> button, select the necessary object types and click <b>Apply</b>.</li>
|
|
<li>
|
|
<b>Right sidebar</b> contains tools and settings to customize the worksheet, shapes, charts, sheets, text, and arrows:
|
|
<ul>
|
|
<li>
|
|
<b>Worksheet</b> settings:
|
|
<ol>
|
|
<li>
|
|
<b>Diagram</b> tab:
|
|
<ul>
|
|
<li><b>View</b>: <em>Grid</em>, its size and color, <em>Page view</em>, <em>Background</em> - you can either select a local image or provide the URL, or choose a suitable color using the color palette via <b>Background Color</b>, as well as add <em>Shadow</em> and <b>Sketch</b> effects.</li>
|
|
<li><b>Options</b>: <em>Connection Arrows</em>, <em>Connection Points</em>, <em>Guides</em>.</li>
|
|
<li><b>Paper size</b>: <em>Portrait</em> or <em>Landscape</em> orientation with specified length and width parameters.</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<b>Style</b> tab:
|
|
<ul>
|
|
<li>Choose the required color preset, as well as set the <b>Sketch</b> and <b>Rounded</b> effects.</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
<li>
|
|
<b>Shape</b> settings:
|
|
<ol>
|
|
<li>
|
|
<b>Style</b> tab:
|
|
<ul>
|
|
<li><b>Color</b>: <em>Fill color</em>, <em>Gradient</em>. Use the <b>Eyedropper</b> tool to create a custom color.</li>
|
|
<li><b>Line</b>: <em>Color</em>, <em>Type</em>, <em>Width</em>, <em>Perimeter width</em>.</li>
|
|
<li><b>Opacity</b>.</li>
|
|
<li>Graphic effects: <b>Rounded</b>, <b>Glass</b>, <b>Sketch</b>, and <b>Shadow</b>.</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<b>Text</b> tab:
|
|
<ul>
|
|
<li><b>Font</b>: <em>type</em>, <em>size</em>.</li>
|
|
<li><b>Text formatting</b>: <em>Bold</em>, <em>Italic</em>, <em>Underline</em>.</li>
|
|
<li><b>Horizontal alignment</b>: <em>Left</em>, <em>Center</em>, <em>Right</em>.</li>
|
|
<li><b>Vertical alignment</b>: <em>Vertical</em> text orientation, <em>Top</em>, <em>Middle</em>, <em>Bottom</em>.</li>
|
|
<li><b>Position</b>: <em>Top Left</em>, <em>Top</em>, <em>Top Right</em>, <em>Left</em>, <em>Center</em>, <em>Right</em>, <em>Bottom Left</em>, <em>Bottom</em>, <em>Bottom Right</em>.</li>
|
|
<li><b>Writing Direction</b>: <em>Automatic</em>, <em>Left to Right</em>, <em>Right to Left</em>.</li>
|
|
<li><b>Font Color</b>.</li>
|
|
<li><b>Background Color</b>.</li>
|
|
<li><b>Border Color</b>.</li>
|
|
<li><b>Word Wrap</b>.</li>
|
|
<li><b>Formatted Text</b>.</li>
|
|
<li><b>Opacity</b>.</li>
|
|
<li><b>Spacing</b>: <em>Top</em>, <em>Global</em>, <em>Left</em>, <em>Bottom</em>, <em>Right</em>.</li>
|
|
<li><b>Clear Formatting</b> button.</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<b>Arrange</b> tab:
|
|
<ul>
|
|
<li><b>Depth arrangement</b>: <em>To Front</em>, <em>To Back</em>, <em>Bring Forward</em>, <em>Send Backward</em>.</li>
|
|
<li><b>Size</b>: <em>Autosize</em>, <em>Width</em>, <em>Height</em>, <em>Constrain Proportions</em>.</li>
|
|
<li><b>Position</b>: <em>Left</em>, <em>Top</em>.</li>
|
|
<li><b>Angle</b>: value in degrees, <em>Rotate shape only by 90°</em>.</li>
|
|
<li><b>Flip</b>: <em>Horizontal</em>, <em>Vertical</em>.</li>
|
|
<li><b>Align</b>: <em>Snap to Grid</em>.</li>
|
|
<li><b>Group</b> button.</li>
|
|
<li><b>Copy Size</b> button.</li>
|
|
<li><b>Reset</b>: <em>All</em>, <em>Waypoints</em>, <em>Connection Points</em>.</li>
|
|
<li><b>Lock/Unlock</b> to restrict editing.</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
|
|
</li>
|
|
<li>
|
|
<b>Arrow</b> settings:
|
|
<ul>
|
|
<li><b>Color</b>: <em>Fill color</em>, <em>Gradient</em>.</li>
|
|
<li><b>Line</b>: <em>Shape</em>, <em>Color</em>, <em>Connection</em>, <em>Pattern</em>, <em>Width</em>, <em>Waypoints</em>, <em>Line start</em>, <em>Line end</em>.</li>
|
|
<li><b>Opacity</b>.</li>
|
|
<li>Graphic effects: <b>Sketch</b>, <b>Shadow</b>.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><b>Working area</b> to view diagrams, enter and edit data. Here you can move objects, form sequential diagrams, and connect objects with arrows.</li>
|
|
<li>
|
|
<b>Status bar</b> contains navigation tools for convenient switching between sheets and managing them.
|
|
<p><img alt="Draw io diagram" src="../images/drawio_diagram.png" /></p>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
<p>Use these tools to create the necessary diagram, edit it, and when it is finished, click the <b>Insert</b> button to add it to the document.</p>
|
|
</div>
|
|
</body>
|
|
</html> |