Как импортировать файл visio в формат io draw confluence
Несмотря на то, что мне нравится широкий набор изображений, который мне доступен, я бы хотел включить пользовательские изображения (мои рисунки, фотографии . ) в документы draw.io. Является ли это возможным?
Я пробовал CTRL + V с изображением буфера обмена, но безуспешно.
Отмеченный ответ старый и уже не правильный.
Нажмите Упорядочить → Вставить → Вставить изображение .
Этот ответ верен для текущей версии, и, пройдя все этапы этого метода, он позволяет перетаскивать, а также URL-адрес.
Прямой импорт из локального файла может изменить размер вашего изображения. Вам нужно сделать хитрость: оставьте страницу draw.io активной, перетащите изображение, прежде чем мышь достигнет области страницы, не забудьте нажать и удерживать кнопку Ctrl, а затем перетащить ее на страницу.
Вы должны войти в аккаунт Google, чтобы импортировать изображения. Когда вы это сделаете, нажмите значок изображения (4-й справа на панели инструментов), и появится Google Image Picker. Выберите один из параметров слева, чтобы передать изображение в средство выбора или выбрать изображение из локальной файловой системы.
Ах, значок изображения. Теперь я чувствую себя действительно смущенным (долгий день на работе - оправдание? :-)). Спасибо за вашу помощь (к сожалению, я не могу высказать вам мнение, так как у меня сейчас недостаточно представителей).
Я не могу найти вариант загрузки из "локальной файловой системы". Начав использовать draw.io, я неохотно подключаю его прямо к своему Google Диску. Я что-то пропустил?
Теперь вы можете просто перетащить файл изображения на холст, чтобы вставить изображение.
Меры предосторожности: Если вы обеспокоены тем, что ваш браузер будет рассматривать пропущенное изображение как ссылку и указывать в своем URL путь к изображению, что может привести к потере прогресса, вы можете просто открыть новую вкладку draw.io, перетащить и отпустить изображение там, ctrl+c это, вернитесь к первой вкладке draw.io, ctrl+v .
Ctrl + C, а затем Ctrl + V на новой вкладке draw.io не работает. Осталось ссылка. Вы должны сохранить изображение на локальном диске и затем перетащить его обратно на диаграмму draw.io.
Привет, Кертис! Я только что проверил это, работал со мной на Chrome . вот что я сделал: открыл две вкладки draw.io, перетащил изображение на первую, он загрузил, щелкнул изображение, Ctrl + C, переместился в следующая вкладка, ctrl + v
Начинается с 'data:', вы перетаскиваете изображение из другой вкладки? Я перетаскивал изображения со своего рабочего стола . но я просто попытался перетащить изображение из другой вкладки (URL-адрес заканчивается на .jpg), и оно скопировалось на другую вкладку draw.io, также оно начиналось с "https:".
В то время как мне нравится, что богатый набор изображений легко доступен мне, я хотел бы включить пользовательские изображения (мои рисунки, фотографии . ) в документы draw.io. Возможно ли это?
Я хотел бы использовать Draw.io в режиме реального времени для совместной работы с коллегой - О странице говорится, что это можно сделать - но я не вижу никаких вариантов. Как я могу это сделать?
Я пытаюсь импортировать файл Visio .vsd в веб-приложение draw.io без успеха. Я видел, что различные онлайн-ссылки на импорт Visio поддерживаются, но нет точных шагов. Я пробовал «File-> Open F
В Draw.Io есть способ скопировать-вставить информацию из одного чертежа на одной вкладке в другую на другой вкладке? Я не мог найти способ сделать это.
Мне нравится широкий выбор доступных форм (General, Arrows, Electric и т. д.), но мне нужны еще несколько электрических символов. Можно ли каким-то образом добавить пользовательские фигуры?
Есть ли возможность выбора нескольких объектов, а затем i) выровнять их так, чтобы они имели общую центральную линию и ii) распределяли их равномерно, так что вертикальное расстояние между ними равн
Как изменить цвет фона для одной ячейки или одной строки таблицы? Я могу только изменить цвет фона всей таблицы в draw.io, но существуют формы, у которых некоторые из других ячеек окрашены по-раз
Есть ли способ включить гиперссылку из текста в один из объектов draw.io? Это поможет связать диаграмму с соответствующими страницами Confluence.
Есть ли способ сделать это, кроме экспорта в png или какой-либо другой формат, а затем импортировать в Google Doc?
Я просмотрел все доступные элементы, но не могу найти кривую или дугу, чтобы добавить к моей диаграмме. Это где-то там?
Я новичок в draw.io и считаю утомительным, что после вставки текстового поля и ввода текста в нем мне нужно вручную изменить размер текстового поля, чтобы весь текст вписывался. Есть ли ярлык для авт
У меня есть текстовое поле, и когда я вхожу в текст, он течет как одна длинная строка. Как это сделать? На YouTube есть видео, но неясно, куда вводить текст.
Я создал одностраничную блок-схему с draw.io и напечатал ее. После открытия снова, чтобы создать новую версию, она открылась для того, что я считал пустой страницей. Теперь появилась страница за
У меня есть большая диаграмма в draw.io. Окно рисования показывает разрывы страниц, но когда я экспортирую в PDF, просто получаю одностраничный PDF-файл с очень большим размером страницы. Есть ли
Я хотел бы нарисовать электрические схемы с прямыми углами в разъемах, но я не могу видеть этот параметр в draw.io, они всегда закруглены. Большинство схем имеют прямые углы . Простой пример h
Я нарисовал диаграмму рабочего процесса /процесса в draw.io , но каждый раз, когда я делаю небольшие изменения Я должен переместить все остальное. Есть ли что-либо, что автоматически меняет диаграмм
Можно ли создать замкнутый путь в draw.io? Я хотел бы закрыть путь, чтобы создать неправильную форму, которая затем может быть задана цветом заливки? Я могу сделать фигуру с помощью строки и доба
Популярные теги
Atlassian Confluence — мощное решение для развертывания Enterprise Wiki в организации (хотя, нет никаких технических проблем с тем, чтобы использовать его и дома — лицензия на 10 пользователей стоит всего 10 американских долларов в год). И лично мне Confluence нравится тем, что имеет дружелюбный интерфейс и позволяет интуитивно понятно редактировать контент, с легкостью дополняя его визуальными составляющими, что позволяет в итоге получить красивые и удобные для просмотра страницы. Кстати, этот пост тоже написан в Confluence.
Как известно многим, визуализация имеет большое влияние на то, как контент будет восприниматься. В последнее время в любых соцсетях и тематических сообществах прослеживается четкий тренд: если ваш пост не содержит визуальной информации, например, тех же картинок с котиками, его мало кто будет читать. А если он еще и длиннее одной страницы… Итак, пользоваться графикой нужно. И тут я сошлюсь на пост комрадов из DevExpress, где они привели интересные факты о визуализации (увы, без пруфов, но цифры на мой взгляд очень похожи на правду):
- 90% информации человек воспринимает через зрение
- 70% сенсорных рецепторов находятся в глазах
- около половины нейронов головного мозга человека задействованы в обработке визуальной информации
- на 19% меньше при работе с визуальными данными используется когнитивная функция мозга, отвечающая за обработку и анализ информации
- на 17% выше производительность человека, работающего с визуальной информацией
- на 4,5% лучше воспоминаются подробные детали визуальной информации
Диаграммы в Confluence
Как я упоминал выше, «из коробки» порисовать не очень-то получится. Зато, если мы обратим свое внимание на аддоны, то для рисования разного рода диаграмм их найдется немало. Попробуем рассмотреть те, которые больше всего на слуху и первые попались в заботливые руки поисковой выдачи. В этот список попали:
-
by Creately for Confluence for Confluence for Confluence for Confluence
Несколько особняком стоит Graphviz Diagrams от Боба Свифта. Этот продукт несколько нарушает принципы экосистемы Atlassian, где все реализовано очень просто и интуитивно понятно, но в нем есть свой особый шарм. Да, вам потребуется не просто добавить аддон в Confluence, но еще и поставить на ваш сервер библиотеку визуализации графов graphviz. Зато потом вы сможете использовать мощный язык DOT для автоматической визуализации ваших данных (наверняка на Хабре есть люди, которые без графов и DOT жизни не представляют).
Примеры того, как можно нарисовать диаграммы при помощи аддонов для Confluence и веб-версий диаграмм:
Объединяет эти аддоны тот факт, что с помощью любого из них можно нарисовать недурственные диаграммы и схемы (или просто импортировать из Visio), но вот графики у них как-то не задались. Либо такая функциональность (построение графиков по таблице с данными) отсутствует, ограничиваясь схематичными представлениями графиков, либо реализована неудобно и рядовому пользователю будет непросто этим воспользоваться.
Пример того, как можно использовать язык DOT и библиотеку Graphviz:
Трудно сказать, какой аддон лучше выбрать. Скорее всего, на выбор повлияют какие-то вторичные для функционала вещи. Например, способность работать на сервере автономно без доступа в Интернет или гибкое лицензирование, позволяющее не покупать сразу 500 лицензий в большой организации, где рисованием подобных диаграмм занимается пять человек. В наше время и цена лицензии часто имеет решающее значение. Я попытался свести основные нефункциональные характеристики в таблицу:
Графики в Confluence
Погуглив "confluence charts", на первой странице я получил вот что (откровенно говоря, негусто):
-
от Atlassian (самое приятное, что этот продукт уже включен в Confluence «из коробки» и за него не нужно доплачивать) от StiltSoft (этот продукт упоминался выше, к сожалению, графики с его помощью быстро и удобно не порисуешь, иначе он был бы однозначным моим фаворитом)
В любом случае, для того, чтобы нарисовать график, вам потребуется таблица с данными. Эта таблица может появиться в Confluence совершенно разными способами, например быть созданной с нуля, импортированной из CSV, копипастой из Excel и даже сформированной запросом из СУБД при помощи SQL for Confluence. Как сформированы данные в таблице — решающего значения не имеет, они просто должны быть. А из уже имеющихся данных мы можем построить графики.
Chart Macro из поставки Confluence
Это встроенный в Confluence макрос, который умеет отрисовывать следующие типы графиков:
- Pie Chart
- Bar Chart
- 3D Bar Chart
- Time Series Chart
- XY Line Chart
- XY Area Chart
- Area Charts
- Gantt Chart
Вот так, например, выглядит Area chart:
… а вот так 3D Bar chart:
… можно посмотреть соотношение продаж разной рыбы в виде наглядной диаграммы Pie chart (круговой диаграммы):
Table Filter and Charts
Аддон разработан компанией StiltSoft, которая является Atlassian Expert и Atlassian Verified Vendor. У него есть свои плюсы и минусы. В плюсах отмечу следующее:
- аддон позволяет не только строить графики, а еще и имеет мощный механизм фильтрации таблиц (и даже умеет строить сводные таблицы с аггрегацией данных)
- очень просто настраивается
- настройки можно менять прямо из режима просмотра, не переходя в режим редактирования страницы (и сохранять их из режима просмотра)
- график можно скачать в один клик
Аддон нам предлагает три макроса:
- Pie
- Donut
- 3D Donut
- Column
- Stacked Column
- Bar
- Stacked Bar
- Line
- Area
- Time Line
- Time Area
Примеры графиков, полученных с помощью Chart from Table
Уже знакомая по Charts круговая диаграмма про рыбу:
Fish Type | 2011 |
---|---|
Herring | 9500 |
Salmon | 2900 |
Tuna | 1500 |
Вот так выглядит график типа stacked column (гугл утверждает, что это гистограмма):
2009 | 2010 | 2011 | |
---|---|---|---|
Revenue | 12.4 | 31.8 | 41.1 |
Expense | 43.6 | 41.8 | 31.1 |
… а вот так выглядит столбчатая диаграмма с накоплением (multi-column chart):
| | | | | | |
---|---|---|---|---|---|---|
Q1 2015 | 207 | 42 | 381 | 20 | 14 | 664 |
Q2 2015 | 278 | 31 | 247 | 58 | 39 | 653 |
Q3 2015 | 227 | 27 | 200 | 23 | 31 | 508 |
Q4 2015 | 257 | 20 | 237 | 58 | 40 | 612 |
Получившийся график можно скачать в один клик как картинку, или можно прямо из режима просмотра поменять настройки графика, используя панель настроек. Панель настроек можно скрыть, равно как и таблицу с исходными данными.
К-к-к-комбо!
Самая мякотка, непосредственно затрагивающая тему графиков. Компоненты аддона (три макроса, входящие в комплект — графики, фильтрацию и сводные таблицы) можно смело и умело комбинировать. Что позволяет строить графики уже недоступные стандартному макросу Charts в достаточно легкой и непринужденной манере. Можно запросто построить график по отфильтрованной сводной таблице, например. Для этого вкладываем таблицу в макрос Table Filter (здесь можно будет фильтровать данные, уменьшив их количество), затем вкладываем Table Filter с таблицей в макрос Pivot Table (он построит сводную таблицу), и в качестве вишенки на торте получившуюся конструкцию помещаем в макрос Chart from Table (этот макрос нарисует график). Звучит страшновато, конструкция похожа на известную всем по сказкам Кощееву смерть. Тем не менее, в реальности все это делается достаточно быстро.
После того, как мы один раз выстроили иерархию данных и макросов — мы можем прямо из режима просмотра страницы менять настройки фильтрации исходных данных, настройки сводной таблицы и настройки графика — все будет тут же пересчитываться и перерисовываться. Настройки можно тут же сохранить, а можно поиграться и оставить как есть — страница вернется в исходное состояние при перезагрузке.
Погодите, а как же JIRA?
И здесь у ребят из Atlassian есть решение прямо «из коробки». Для начала, если вы еще не настроили — вам потребуется application link между Confluence и JIRA, стандартный для продуктов Atlassian. После этого Confluence сможет получать данные из JIRA. Для визуализации же этих данных в состав Confluence включен макрос JIRA Charts (который, к слову, поддерживает фильтры JIRA и даже jql-запросы для получения нужных вам данных). А для графического отображения полученных данных есть три типа графиков:
- Pie Chart from JIRA (стандартная круговая диаграмма)
- Created vs Resolved Chart from JIRA (созданные и решенные задачи)
- JIRA Two-Dimensional Chart (двумерная диаграмма)
… а вот так выглядит сравнительная диаграмма созданных и решенных задач:
Пример двумерной диаграммы (по сути простая таблица):
Разумеется, полученные из JIRA данные можно обработать и отрисовать при помощи макросов, входящих в состав Table Filter and Charts. Можно, разумеется, применять фильтры уже в процессе получения данных из JIRA, чтобы не тащить и потом не фильтровать лишнее. А можно по-простому затянуть минимально отфильтрованные данные и дофильтровать их по месту, потом привести к формату сводной таблицы и построить график либо по исходным отфильтрованным данным, либо по уже получившейся сводной таблице. А если что-то выглядит не так, как ожидается — аккуратно и быстро поменять настройки фильтров или графиков. Комбо!
Вместо заключения
Навыки правильной визуализации данных, когда все графики и картинки приходятся к месту и помогают, а не мешают восприятию информации, нужно нарабатывать. Но с хорошими инструментами их нарабатывать гораздо проще, потому что отвлекаться на сам процесс рисования придется меньше. Надеюсь, после этой статьи кто-нибудь перестанет считать Confluence очередной унылой корпоративной википедией и начнет использовать всю мощь этого решения, вовлекая в процесс окружающих.
Экспортировано из draw.io как SVG
Всю эту визуализацию и инфографику хотелось бы сделать более заметной, привлекательной и душевной (и, желательно, без привлечения дизайнера). Что-то вроде этого:
Обработано в INSTAD.IO
Сначала я пробовал перерисовывать диаграммы руками на листе бумаги и сканировать, потом пытался отрисовывать их в векторном редакторе, используя разные кисти. Наконец, экспериментировал со стилусом на планшете — во всех случаях получалась какая-то непотребщина, на которую ещё и уходило много времени. Благо, программирую я чуть лучше, чем рисую — то даёт шанс компенсировать недостаток одного навыка другим. Так у меня возникла идея создания инструмента для отрисовки диаграмм и графиков в стиле «нарисовано от руки».
Построено в GoogleSheets, обработано в INSTAD.IO Построено в GoogleSheets, обработано в INSTAD.IO
В итоге придумалась следующая схема:
Загружаем готовый векторный SVG-рисунок со схемой, графиком или диаграммой. Его можно нарисовать в draw.io или даже в GoogleSheets.
Заменяем в исходном SVG все примитивы типа , , и пр. на , который генерирует roughjs.
Примеряем к надписям рисованные шрифты (мне понравились бесплатные гарнитуры XKCD, Indie, Caveat и Pangolin), после чего подгоняем размеры надписей, чтобы высота и ширина не отличалась от исходных, и при этом надписи читались.
Меняем цвета на приятные, переносим часть стилей и фильтров из оригинального SVG, чтобы диаграмма максимально сохраняла пропорции, позиции элементов и свойства фигур.
Экспортируем в PNG в высоком разрешении или сохраняем обратно в SVG.
Вернее, профита с ней не получилось, так как для сервиса найти product-market fit пока не удалось. Как говорится, «все пробуют, хвалят, но замуж не берут».
Но вернёмся к технической стороне вопроса. Несмотря на очевидность и простоту подхода, пришлось решить достаточно много технических нюансов. Например, учесть то, что SVG — это достаточно вольный формат, который позволяет один и тот же прямоугольник нарисовать десятком разных способов. Иногда попадались SVG-изображения, где прямоугольник — это классический с атрибутами fill и stroke. В других — с CSS-стилями. А в каких-то случаях это вообще с фильтрами. Всё это пришлось учитывать при отрисовке: парсить стили, фильтры, атрибуты и некоторые добавлять после конвертации в roughjs .
Пришлось повозиться и с рендерингом текста. Так, например, файл, экспортированный из draw.io, сохраняет большую часть данных не в каноническом SVG, а как контейнеры внутри который с обычным HTML-кодом. А там всё в кучу:
Ещё оказалось непросто поддерживать правильные цвета контура и заливки для фигур, поскольку они не всегда заданы SVG-атрибутами fill / stroke внутри примитива. Иногда цвета наследуются от родительского элемента, иногда объявлены в локальном стиле через style, а иногда — в глобальном стиле или даже в фильтре. Одним словом — бардак ).
Отдельная беда была с производительностью и потреблением памяти. Когда конвертируется график с 30 примитивами — всё работает шустро и незаметно. А вот векторизованное растровое изображение с 10K+ объектами или дашборд из Tableau, сохранённый в PDF, страшно тормозил. Но тут, конечно, всё зависело от производительности компьютера, потому что рендерится оно в браузере на клиенте (привет пользователям новых маков на M1 Max, у которых всё быстро). Первую версию SVG-конвертера я сделал на jQuery, но потом переписал на обычном js и оно стало работать в 2.5 раз быстрее и потреблять процентов на 70 меньше памяти. Такая вот плата за удобство.
После некоторого периода тестирования стало понятно, что не во всех редакторах диаграмм и генерилках графиков есть экспорт в SVG. Или есть, но с побочными эффектами. Например, при сохранении графиков из GoogleSheets в SVG текст переводится в кривые. В этом случае надпись становится картинкой и её уже не поменять. Но том же GoogleSheets можно сохранить график в PDF, где надписи остаются без изменений. Поэтому пришлось прикрутить загрузку других форматов (PDF, EPS) – cпасибо консольному inkscape за возможность конвертации векторных форматов.
Постепенно сервис обрастал всякими фичами, наподобие работы с буфером обмена: можно скопировать в буфер код SVG и вставить его в сервис для рестайлинга (это особенно удобно, если копируете непосредственно со страницы с SVG-графиком или диаграммой). А результат можно скопировать в буфер и затем вставить в документ.
Кроме векторных графиков и диаграмм неплохо получаются рисованные карты и схемы:
Большая часть сервиса сделана на самом обыкновенном Vanilla JS, UI — на Bootstrap + jQuery. Небольшая серверная часть — на PHP. Всё крутится в докере. Для авторизации без регистраций прикрутил Google и Facebook.
Напоследок проиллюстрирую работу сервиса на Хабра-схеме модерации постов из справочного раздела про «Песочницу»:
Сервис INSTAD.IO бесплатный, потестировать его можно здесь. Будет здорово, если вы тоже найдёте ему применение при решении своих повседневных графических задач. За информацию о багах также буду премного благодарен!
Итак, у вас есть длинные лабораторки, которые делаются уже не одну неделю. Каждый день вы что-то добавляте и вам уже достаточно трудно сориентироваться: что и на каком этапе было добавлено, как называются те или иные устройства. Конечно у вас уже есть копия вашего GIT, и часто приходится прыгать между лабами/конфигами и т.п. И вдруг вам надо добавить на похожие хосты похожие куски конфигов, но вы уже подзапутались какое имя было у того верхнего левого роутера или нижнего правого ACCESS свича. Если знакомая ситуация - читайте дальше, Шура.
Для тех кому лень читать - видео на 8 минут под музыку ))
Итак, рассказываю что же тут происходит:
Есть лабораторки по настройке сети в несколько этапов
У каждой лабораторки есть своя папка с конфигами всех устройств
Draw.io, в котором уже нарисована вся схема с указанием интерфейсов, адресов.
Для себя я решил что нужен порядок в названиях устройств, в названиях каталогов, поэтому в каждой из лекций у меня есть обязательно 2 папки pictures и labs, ну и обязательная подпапка configs. Плюсы от такой организации - становятся очевидны, если вы используете какой-то редактор для оформления вашего GIT.
Итак, структура каталогов есть, заготовки под конфиги первой лабы - есть, пришла пора замапить конфиги на конкретную ноду Лабы из 10-й лекции в DRAW.io
Делаем "раз-два-три" по пунктам:
Вызываем соответствующий лист DRAW.io
Переходим на соответствующую ноду
задаем свойства LINK объекта: cтавим галочку "Open in new Window" и задаем линк в виде ссылки на локальную файловую систему в виде: file://E:\Study\GIT\XXXXX-networks\LECTURES\MODULE02\Lecture10\labs\configs\04-R23.txt
Добавление свойства link нужного объекта приведет к тому, что при выделении какого-либо роутера или свича появится ссылка, при клике на которую - откроется сам файл в заранее определенном редакторе. Я не заморачивался, поэтому у меня все открывается в notepad
Читайте также: