Построить блок схему онлайн. Элементы блок-схем алгоритмов. Циклы со счетчиками

Есть много разных сервисов, облегчающих жизнь веб-разработчику или дизайнеру, в том числе создающих разные графики, диаграммы, блок-схемы и т.д. Ниже представлена небольшая подборка.
(Осторожно, много изображений)

Все картинки кликабельны и ведут на соответствующий ресурс.

Amcharts - это набор flash-based диаграмм для сайтов. Может извлекать данные из CSV или XML файлов, также может получать данные, сгенерированные динамически при помощи PHP, .NET, Java, Ruby on Rails, Perl и т.д.

Flash based решение для визуализации. Есть не только веб, но и десктопные приложения.

Предлагает инструменты для рисования схем электронных плат, диаграмм, различного рода UI. Не требует никаких дополнительных плагинов - требуется только браузер, работающий с JavaScript, является кросс-браузерным. Поддерживает экспорт в PDF, JPG, PNG, и SVG.

Используется для построения столбчатых диаграмм, иными словами гистограмм.

Best for Charts. Используется для построения различного рода диаграмм и схем.

Создает разноцветные схемы.

Онлайн тулза для создания различных графиков, поддерживает метки и легенду.

Позволяет создавать различные графики для сайтов, блогов, профилей и т.д. Может быть полезен для визуализации научной, финансовой или какой-либо другой информации.

Онлайн-сервис, поддерживающий 5 разных графиков и диаграмм на ваш выбор.

Блок-схемы, различные организационные, иерархические графики. Поддерживает экспорт в PDF.

Поддерживает различные типы графиков, масштабирование по осям, авто-зум и т.д. Отличается высокой интерактивностью.

Поддерживает рисование множества объектов (от линий и треугольников, до кривых Безье), экспортирует в PDF или PNG.

Простенький сервис, поддерживающий построение графиков и диаграмм.

Отличный сервис для создания различных диаграмм, очень приятный на вид интерфейс и множество возможностей.

Позволяет создавать и редактировать диаграммы связей.

Очень гибкий инструмент для создания различных диаграмм связей.

Простенькая тулза для создания диаграмм.

Онлайн генератор графиков, поддерживает семь начальных инструментов бесплатно.

Бесплатный сервис, поддерживает различные диаграммы, графики и т.д. Работает на Flash.

Сервис для создания схем. Ключевая особенность - описание схем на неком подобии языка программирования.

Отличный сервис для анализа различной информации.

Сервис для различного рода планирования, также поддерживает диаграммы, бесплатен.

Мощный инструмент для статистического моделирования и анализа. Позиционируется для изучения статистики на практике.

Простенький, но приятный на вид сервис для построения графиков.

Библиотеки, плагины, инструментарии для разработчика

Plotr

Легкий фреймворк для рисования простых графиков и диаграмм. Не использует Flash, и не поддерживает интерактивных элементов.

Библиотека для построения графиков на JavaScript, поддерживает HTML Canvas.

Open Source плагин для библиотеки jQuery. Поддерживает всевозможные линии и типы графиков.

Разнообразный набор инструментов для создания диаграмм и графиков, включая библиотеку на JavaScript.

Библиотека на JavaScript, предназначенная для создания интерактивных графиков и диаграмм.

Вам понадобится

• - трафарет для черчения блок-схем;
• - механический карандаш;
• - ластик;
• - бумага;
• - компьютер с доступом в интернет.

Инструкция

Начало и конец алгоритма обозначаются овалами. Внутри них помещают, соответственно, слова «Начало» и «Конец». От овала, символизирующего начало алгоритма, исходит одна стрелка вниз, к , символизирующему конец алгоритма, приходит стрелка сверху.

Шаги, соответствующие действиям, не связанным с вводом-выводом, обозначаются при помощи прямоугольников. Пример такого действия - вычисление и присвоение результата той или иной переменной. Стрелка от предыдущего шага приходит к прямоугольнику сверху, а снизу от него исходит стрелка к следующему шагу.

Для обозначения шагов, соответствующих операциям ввода-вывода, используются параллелограммы. Такие операции бывают двух видов: присвоение поступивших откуда-либо данных переменной и вывод данных из переменной в файл, порт, на , принтер и т.п.

Ветвления обозначаются ромбами. В верхний угол ромба приходит стрелка от предыдущего шага, а из его боковых углов исходят стрелки, как «Нет» и «Да». Они приходят, соответственно, к шагам, выполняемым при несоблюдении и соблюдении условия. Нижний угол ромба оставляется свободным. Само (например, равенство, строгое или нестрогое) внутри ромба.

Прямоугольник, боковые стенки которого двойные, олицетворяет переход к подпрограмме. После того как в подпрограмме встретился оператор возврата, продолжается выполнение основной программы. Внутри указывается название подпрограммы. Блок-схемы всех подпрограмм помещаются под блок-схемой основной программы либо на отдельных страницах.

Если вы желаете составлять блок-схемы в электронном виде, воспользуйтесь -приложением под названием Flowchart. При желании можно также освоить особые языки программирования, в которых сам процесс программирования заключается в составлении блок-схемы. Таких языков два: Дракон и HiAsm.

Источники:

• как начертить блок схему

Блок-схема является вариантом формализованной записи алгоритма или процесса. Каждый шаг алгоритма в данном представлении изображается в виде блоков различной формы, которые соединены между собой линиями. В блок-схеме можно отобразить все этапы решения любой задачи, начиная с ввода исходных данных, обработки операторами, выполнения цикличных и условных функций, и заканчивая операциями вывода результирующих значений.

Инструкция

Как правило, вначале алгоритма производится ввод исходных данных для решения поставленной задачи. Нарисуйте параллелограмм ниже линии так, чтобы он непрерывным продолжением схемы. В параллелограмме напишите производимое действие, обычно это операции данных с экрана (Read nInp) или других устройств. Важно, что введенные вами переменных в данном шаге будут использоваться в дальнейшем во всем теле блок-схемы.

Выполнение одной или группы операций, любая обработка данных (изменение значения или формы представления) обозначается в виде прямоугольника. Нарисуйте данную фигуру в нужном месте алгоритма при составлении блок-схемы. Внутри прямоугольника запишите производимые действия , например, операция присваивания записывается следующим образом: mOut = 10*nInp b + 5. Далее также для продолжения блок-схемы нарисуйте линию вниз.

Важной составляющей любого алгоритма и соответственно блок-схемы являются условные и цикличные операторы. У данных операторов один вход и два и или более альтернативных выхода. После вычисления условия, заданного оператором, дальнейший переход осуществляется лишь по одному пути. Нарисуйте вход в элемент в виде линии входящей в верхнюю вершину элемента.

Для задания оператора условия нарисуйте от данной линии ромб. Внутри фигуры укажите само условие и проведите линии, указывающие дальнейший переход в зависимости от его выполнения. Условие задается в общем случае операциями сравнения (>, <, =). Переход по линии вниз осуществляется при истинном условии, назад – при ложном. Укажите около выходных линий фигуры результаты условия (true, false). Невыполнение условия (false) возвращает к определенному шагу выше по телу алгоритма. Проведите линии под прямым углом от выхода с условия и до нужного оператора.

Цикличный оператор обозначается прямоугольниками со скошенными углами. Причем для рисования данного оператора используются две пограничные фигуры. Начало цикла задается фигурой со скошенными верхними углами, конец цикла – фигурой со скошенными нижними углами. В фигуре начала цикла укажите условие работы цикла и между пограничных фигур нарисуйте операторы цикла.

В завершении блок-схемы должен быть указан вывод результирующих данных на носители или на экран. Оператор вывода рисуется аналогично оператору ввода. Изобразите параллелограмм и внутри него операции вывода с использованием выходных переменных.

Блок-схема является универсальной формой выражения алгоритма, которая затем может быть переведена на любой язык программирования. Она создается в виде, пригодном для чтения человеком. Это позволяет проверить правильность составления алгоритма вручную.

Инструкция

На конце каждой из линий, соединяющих элементы блок-схемы друг с другом, наносите . Это позволит точнее определить очередность выполнения действий, особенно, если алгоритм является разветвленным.

Текстовый редактор Microsoft Word - программа, позволяющая пользователю решать множество задач. Помимо широких возможностей по работе с текстом, Word может предложить вам инструменты для создания некоторых графических элементов, чтобы сделать ваш документ ещё лучше. Различные блок-схемы являются очень популярным средством для того, чтобы продемонстрировать что-либо более наглядно. В этой статье подробно рассмотрим, как сделать схему в Word и поговорим обо всех аспектах и нюансах этого процесса. Давайте разбираться. Поехали!

Текстовый редактор имеет множество специальных инструментов

Чтобы создать блок-схему, откройте вкладку «Вставка». В последних версиях Microsoft Word доступен специальный инструмент под названием «SmartArt». Вызвать его можно в разделе «Иллюстрации» на панели инструментов. Перед вами откроется окно выбора графических элементов. В нём вы можете подобрать подходящий макет из предложенных вариантов. Если вам потребуется добавить дополнительную ячейку, нажмите кнопку «Добавить фигуру». Заполнять ячейки и изменять их иерархию можно в окне «Область текста». Добавление текста осуществляется простым вводом символов в соответствующие поля окна.

Заполнив все ячейки, переходите к следующему этапу. Откройте вкладку «Формат». Чтобы изменить размеры вашей блок-схемы, кликните по кнопке «Размер» в правой части панели инструментов . Появится небольшое окно с двумя полями «Высота» и «Ширина». Введите значения в соответствующие поля, чтобы привести схему к нужному размеру и пропорциям. Вы можете изменять размер как отдельных ячеек, так и нескольких одновременно. Для этого отметьте каждую из них, держа нажатой клавишу Shift. Текст из каждого блока можно редактировать по своему усмотрению, применяя разнообразные шрифты, цвета, стили WordArt и прочее.

Также есть возможность изменять стиль и всей схемы в целом. Для этого зайдите во вкладку «Конструктор». В разделе «Стили SmartArt» на панели инструментов выберите понравившийся из предложенных вариантов . Среди них есть с добавлением теней, объёма и 3D стили. В той же вкладке кнопкой «Изменить цвет» устанавливается желаемый цвет блок-схемы. Выбор достаточно большой. Имеются варианты с окрашиванием ячеек в разные цвета на основе их иерархии.

Вы можете снова вернуться к выбору макета, но обратите внимание, что все параметры и стили для шрифтов будут сброшены и их придётся устанавливать заново. Также обратите внимание, что, если вам не нужно задавать точные и чёткие размеры блоков или всего рисунка, вы можете делать это обычным способом при помощи растягивания мышкой.

В более старых версиях Microsoft Word, где отсутствует SmartArt, процесс создания схем будет чуть более кропотливым либо вы можете использовать такой способ, если макеты SmartArt пришлись вам не по душе. Перейдя на вкладку «Вставка», нажмите кнопку «Фигуры». В открывшемся списке выбирайте необходимые фигуры. В том же перечне вы обнаружите различные варианты соединительных линий, стрелок и прочее, что пригодится для построения красивой блок-схемы. Кликнув по ячейке правой кнопкой мыши, вы вызовите меню, в котором можно добавить текст, изменить цвет или поменять стиль. Добавляя различные эффекты, вы сделаете рисунок более интересным и привлекательным для читателя, поэтому не стоит ими пренебрегать.

Блок-схемы - это схемы, на которых показаны этапы процесса. Простые блок-схемы легко создавать, а благодаря простоте и наглядности фигур они также удобны для восприятия.

Примечание. Вы также можете автоматически создать простую блок-схему на основе данных, используя визуализатор данных в Visio Online (план 2). Дополнительные сведения см. в статье Создание схем с помощью визуализатора данных .

Шаблон "Простая блок-схема" в Visio содержит фигуры, которые можно использовать для наглядного представления разнообразных процессов. Он особенно полезен для отображения простых бизнес-процессов, таких как процесс разработки предложения, показанный на рисунке ниже.

В дополнение к шаблону "Простая блок-схема" в Visio доступны различные шаблоны схем более узкого назначения, таких как схемы потоков данных, временные шкалы и модели программного обеспечения.

Создание блок-схемы

Запустите приложение Visio.

Дважды щелкните значок Простая блок-схема .

Чтобы соединить элементы блок-схемы, наведите указатель мыши на первую фигуру, и щелкните стрелку, указывающую на фигуру, с которой требуется создать соединение. Если вторая фигура находится не рядом с первой, необходимо перетащить маленькую стрелку к центру второй фигуры.

Чтобы изменить направление стрелки соединительной линии, выберите соединение, а затем на вкладке в группе Стили фигур щелкните пункт Линия Стрелки и выберите нужное направление и вид стрелки.

Автоматическое выравнивание и интервалы

Нажмите сочетание клавиш CTRL+A, чтобы выбрать все объекты на странице.

На вкладке Главная в группе Упорядочение нажмите кнопку Положение и выберите пункт Автовыравнивание и определение интервалов .

Если это не привело к нужному результату, отмените ее, нажав сочетание клавиш CTRL+Z, и воспользуйтесь другими параметрами меню кнопок Выравнивание и Положение .

Что представляют блок-схемы

При открытии шаблона Простая блок-схема открывается набор элементов Фигуры простой блок-схемы . Каждая фигура в этом наборе представляет собой тот или иной этап процесса. Но фигуры не имеют какого-то универсального смысла, их значение определяется создателями и пользователями блок-схем. В большинстве блок-схем используется три или четыре вида фигур, и этот диапазон расширяется только по специфической необходимости.

При этом названия фигур в Visio указывают на их применение. Ниже описаны наиболее распространенные фигуры.

Что представляют блок-схемы

В Visio 2010 есть множество других, специализированных наборов элементов и фигур, которые можно использовать в блок-схеме. Дополнительные сведения о других фигурах см. в статье .

Примечание: Не удается найти нужную фигуру? Дополнительные сведения о том, как найти другие фигуры, см. в статье Упорядочение и поиск фигур с помощью окна "Фигуры" .

Создание блок-схемы

Откройте вкладку Файл .

Вкладка Файл не отображается

Если вкладка Файл не отображается, перейдите к следующему шагу процедуры.

Выберите команду Создать и пункт Блок-схема , а затем в списке Доступные шаблоны выберите элемент Простая блок-схема .

Нажмите кнопку Создать .

Для каждого этапа документируемого процесса перетащите в документ соответствующую фигуру блок-схемы.

Примечание: Сведения об использовании фигур для представления каждого шага процесса см. в разделе .

По умолчанию используются прямоугольные



Прямые соединительные линии



Для возврата к обычному редактированию на вкладке Главная в группе Сервис нажмите кнопку Указатель .

Чтобы добавить текст для фигуры или соединительной линии, выделите ее и введите текст. По завершении ввода текста щелкните в пустой области страницы.

Чтобы изменить направление стрелки соединительной линии, выберите соединение, а затем в группе щелкните стрелку справа от надписи Линия , наведите указатель на пункт Стрелки и выберите нужное направление.

Печать большой блок-схемы

Перед началом печати нужно убедиться в том, что отображаемая в Visio страница документа содержит блок-схему полностью. Все фигуры, которые выходят за пределы страницы в Visio, не будут напечатаны.

Чтобы распечатать большую блок-схему, сделайте следующее:

Что представляют блок-схемы

Когда вы открываете шаблон "Простая блок-схема", также открывается набор элементов "Фигуры простой блок-схемы". Каждая фигура в наборе элементов соответствует конкретному шагу процесса.

Из фигур, входящих в набор элементов "Фигуры простой блок-схемы", широко используются только некоторые. Именно эти фигуры описаны ниже. Дополнительные сведения об остальных фигурах см. по ссылке (Менее популярные фигуры блок-схемы) в конце этого раздела.

Менее популярные фигуры блок-схемы

Динамическая соединительная линия. Эта соединительная линия проходит в обход фигур, лежащих на ее пути.

Это соединительная линия с настраиваемой кривизной.

Это текстовое поле с рамкой, размер которого изменяется в зависимости от объема введенного текста. Ширину можно задать, перетащив боковые стороны фигуры. Эта фигура не представляет этап процесса, но ее удобно использовать для размещения надписей на блок-схеме.



Примечание. Это поле в квадратных скобках, размер которого изменяется в зависимости от объема введенного текста. Ширину можно задать, перетащив боковые стороны фигуры. Как и "Поле с автоподбором высоты", эта фигура не представляет этап процесса. Используйте ее для добавления примечаний к фигурам блок-схемы.



Ручной ввод. Это этап, на котором человек предоставляет информацию процессу.

Ручная операция. Это этап, который должен быть выполнен человеком.

Внутреннее хранилище. Эта фигура представляет данные, которые хранятся на компьютере.

Прямые данные. Эта фигура представляет данные, которые хранятся таким образом, что к каждой отдельной записи возможен прямой доступ. Это соответствует способу хранения данных на жестком диске компьютера.



Последовательные данные. Эта фигура представляет данные, которые сохраняются последовательно (например, данные на магнитной ленте). Считывать такие данные можно только последовательно. Например, чтобы обратиться к записи 7, нужно сначала просмотреть записи 1–6.

Карта и бумажная лента. Эта фигура представляет перфокарту или бумажную ленту. В ранних компьютерных системах перфокарты и бумажные ленты использовались для записи и чтения данных, а также для хранения и запуска программ.

Дисплей. Эта фигура представляет данные, отображаемые для пользователя (обычно на экране компьютера).

Подготовка. Эта фигура обозначает инициализацию переменных при подготовке к выполнению процедуры.

Параллельный режим. Эта фигура показывает, где два разных процесса могут работать одновременно.

Предел цикла. На этой фигуре показано максимально возможное количество повторений цикла до перехода к следующему этапу.

Передача управления. Эта фигура обозначает этап, на котором при выполнении некоторых условий происходит переход не к следующему, а к другому этапу.

Создание блок-схемы

В меню Файл Создать , затем на пункт Блок-схема и выберите пункт Простая блок-схема .

Для каждого этапа документируемого процесса перетащите в документ соответствующую фигуру блок-схемы.

Соедините фигуры блок-схемы одним из указанных ниже способов.

Соединение двух фигур друг с другом

Соединение одной фигуры с несколькими с помощью одной точки соединения

По умолчанию используются прямоугольные соединительные линии, и соединение точки на фигуре с тремя другими фигурами выглядит как на рисунке ниже.



Чтобы соединительные линии исходили прямо из центральной точки первой фигуры и вели к точкам на всех других фигурах, необходимо задать Прямые соединительные линии , как показано на приведенном ниже рисунке.



На панели инструментов Стандартная щелкните инструмент Указатель , чтобы вернуться в обычный режим правки.

Чтобы добавить текст для фигуры или соединительной линии, выделите ее и введите текст. По завершении ввода текста щелкните в пустой области страницы.

Чтобы изменить направление соединительной линии, в меню наведите указатель мыши на пункт Операции и выберите пункт Обратить концы .

Печать больших блок-схем

Наиболее простой способ вывести на печать блок-схему, размеры которой превышают размеры бумаги, - распечатать ее на нескольких листах, а затем склеить их.

Перед началом печати нужно убедиться в том, что отображаемая в Visio страница документа содержит блок-схему целиком. Все фигуры, которые выходят за пределы страницы в Visio, не будут напечатаны. Чтобы проверить, помещается ли блок-схема на страницу документа, используйте предварительный просмотр в диалоговом окне Параметры страницы (меню Файл , пункт Параметры страницы , вкладка Настройка печати ).

1. Блок-схема. размер которой слишком велик для страницы документа Visio.

2. Блок-схема, которая помещается на страницу документа Visio.

Изменение размера страницы документа Visio в соответствии с размером блок-схемы

Когда открыта блок-схема, в меню Файл выберите пункт Параметры страницы .

Откройте вкладку Размер страницы .

На вкладке Размер страницы щелкните .

Чтобы увидеть, как блок-схема будет выглядеть на печати, в меню Файл выберите пункт Предварительный просмотр . На рисунке ниже показана блок-схема, которая будет распечатана на четырех листах формата Letter.

Печать больших блок-схем на нескольких листах бумаги

В меню Файл выберите пункт Параметры страницы .

На вкладке Настройка печати в поле Бумага в принтере выберите нужный размер бумаги, если он еще не задан. Не нажимайте кнопку ОК .

Откройте вкладку Размер страницы и щелкните Изменять размеры по содержимому . В окне предварительного просмотра теперь видна разница между новой страницей и бумагой в принтере.

Нажмите кнопку ОК .

В меню Файл выберите пункт Предварительный просмотр , чтобы увидеть, как блок-схема будет выглядеть на печати.

Примечание: Между страницами могут отображаться затененные поля. Они соответствуют тем областям, которые будут распечатаны на обоих листах. Это позволяет склеить листы таким образом, чтобы на блок-схеме не было пустых промежутков.

После завершения печати можно обрезать поля, расположить страницы надлежащим образом и склеить их.

Блок-схема в Word. Студенту или инженеру часто приходится создавать, различны схемы из блоков со стрелками и надписями. У кого–то есть специальная программа для этого, а некоторые умеют создавать такие схемы в Word. Если блоки на диаграмме должны быть соединены стрелками или предполагается «наращивание» диаграммы новыми блоками, то вместо таблиц лучше использовать вариант создания схемы как графического объекта. Встроенные средства рисования программы Word позволяют создать сколь угодно сложную схему. При этом текстовое содержание располагается не в основном документе, а в специальных графических вставках – надписях.

Давайте и мы попробуем сделать такую схему.

Блок-схема в Word 2003

Нажмите на панели Рисование фигуру Прямоугольник . Должна появиться вот такая рамка (без надписей). В ней мы и будем создавать свою блок-схему.

Совет

Панель инструментов Рисование обычно располагается в нижней части окна программы. Если у вас нет внизу панели рисования, то зайдите в меню Вид – Панели инструментов , и установите галочку на Рисование.

Нажмите кнопку Автофигуры на панели Рисование , выберите команду Блок-схема , а затем щелкните нужную фигуру.

Потом щелкните в поле рамки в том месте, где хотите расположить эту фигуру.

Если она встала не там, где вам хотелось, то перетащите её мышкой.

Выберите и расположите таким же образом остальные фигуры вашей будущей схемы.

Вы можете эти фигуры перетаскивать и изменять их размеры.

Теперь добавим надписи к нашим фигурам. Для этого на панели инструментов Рисование и щелкаем по значку Надпись .

Потом щелкаем на той фигуре, в которую хотим вставить эту надпись. Появится маленькая рамочка с мигающим курсором внутри.

Пишем название нашего блока. Надпись внутри этого поля можно форматировать, как простой текст в документе. Поле для надписи также можно перетаскивать и изменять его размер. Блоки с надписями можно копировать и вставлять в другие блоки.

По умолчанию надпись заключается в прямоугольную рамку. Если же нужно наложить надпись на фигуру другого вида, эту рамку следует удалить. Для этого надо щелкнуть на рамке с надписью правой кнопкой мыши и выбрать в контекстном меню пункт Формат надписи.

В раскрывшемся диалоговом окне открыть вкладку Цвета и линии . В группе линии Цвет . Выбрать вариант Нет линий .

Совет

Ещё проще вставлять текст другим способом. Щелкните правой кнопкой мыши по блоку, в который необходимо вставить текст, и в выпадающем меню выберите пункт Добавить текст .

Для красоты фигуры можно раскрасить разными цветами. Для этого выделите щелчком мыши необходимую фигуру и щелкните на панели Рисование иконку Цвет заливки и в раскрывшейся палитре выберите понравившийся вам цвет.

Таким же образом можно залить и блоки с надписями, чтобы они были не белыми, а цветными или одного цвета с блоком схемы.

Теперь добавим к нашей схеме стрелки.

Стрелки на диаграмме рисуют с помощью инструмента Стрелка. Их свойства могут быть изменены так же, как и свойства надписи. При этом можно управлять толщиной стрелки, видом линии, формой конца стрелки и т.д.

Щелкаем по кнопке Автофигуры – Фигурные стрелки , и выбираем стрелку. Потом переходим на поле нашей блок-схемы и щелкаем мышкой там, где необходимо вставить стрелку. Можете её залить каким-нибудь цветом.