Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity
web-apps/apps/documenteditor/main/resources/help/en/UsageInstructions/Drawio.htm

67 lines
4.7 KiB
HTML
Raw Normal View History

Update help
2022-05-27 14:43:19 +00:00
<!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" />
replacing img with div
2022-05-31 13:05:19 +00:00
<link type = "text/css" rel = "stylesheet" href = "../../images/sprite.css" />
Update help
2022-05-27 14:43:19 +00:00
<link type="text/css" rel="stylesheet" href="../editor.css" />
<script type="text/javascript" src="../callback.js"></script>
<script type="text/javascript" src="../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>
<ol>
<li>Select the place on the page where you want to insert a diagram.</li>
replacing img with div
2022-05-31 13:05:19 +00:00
<li>Switch to the <b>Plugins</b> tab and click <div class = "icon icon-drawio"></div> <b>draw.io</b>.</li>
Update help
2022-05-27 14:43:19 +00:00
<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:
<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, as well as add <em>Shadow</em> 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>Shape</b> settings:
<ul>
<li><b>Color</b>: <em>Fill color</em>, <em>Gradient</em>.</li>
<li><b>Line</b>: <em>Color</em>, <em>Type</em>, <em>Width</em>, <em>Perimeter width</em>.</li>
<li><b>Opacity</b>.</li>
</ul>
</li>
<li>
<b>Arrow</b> settings:
<ul>
<li><b>Color</b>: <em>Fill color</em>, <em>Gradient</em>.</li>
<li><b>Line</b>: <em>Color</em>, <em>Type</em>, <em>Width</em>, <em>Line end</em>, <em>Line start</em>.</li>
<li><b>Opacity</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>
Reference in a new issue Copy permalink