Flow Diagram simple nocode js

flow-diagram-simple-nocode-js.markdown

Flow Diagram simple nocode js

A Pen by Cloud Dark on CodePen.

License.

index.html

		<header class="title-bar">
			<div class="column">
				<h1>🌵 Multi-Conditional Switch Example</h1>
			</div>
			<div class="column text-end flex-1">
				<a href="https://github.com/nocode-js/sequential-workflow-designer" target="_blank">GitHub</a>
			</div>
		</header>

		<div class="main">
			<div id="designer"></div>
		</div>

	</body>
</html>

scripts

<script src="https://nocode-js.github.io/sequential-workflow-designer/examples/assets/lib.js"></script>
<script src="https://nocode-js.github.io/sequential-workflow-designer/examples/assets/multi-conditional-switch.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>

style.css

			html,
			body {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			body {
				display: flex;
				flex-direction: column;
			}
			.main {
				flex: 1;
				position: relative;
			}
			#designer {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.sqd-editor {
				padding: 10px;
			}
			.sqd-editor h2 {
				margin: 10px 0 20px;
				padding: 0;
				line-height: 1.1em;
			}
			.sqd-editor p {
				line-height: 1.3em;
			}
			.sqd-editor button {
				border: 0;
				padding: 5px 8px;
				background: #222;
				color: #fff;
				cursor: pointer;
				border-radius: 5px;
			}
			.sqd-editor button:hover {
				background: #444;
			}
			.sqd-editor input[type='text'] {
				width: 100%;
				margin: 0 0 5px;
				box-sizing: border-box;
				padding: 5px;
				border: 1px solid #ddd;
				border-radius: 5px;
			}
			.sqd-editor .switch-branch {
				padding: 10px;
				border: 1px solid #ddd;
				margin: 10px 0;
				border-radius: 5px;
			}
			.sqd-editor .switch-branch h4 {
				margin: 0;
				font-size: 14px;
				background: #ddd;
				padding: 5px;
				border-radius: 5px;
			}
			.sqd-editor .switch-branch label {
				display: block;
				padding: 5px 0;
			}

styles

<link href="https://nocode-js.github.io/sequential-workflow-designer/examples/assets/common.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/designer.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/designer-light.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/designer-dark.css" rel="stylesheet" />