Русский
中文
Español
Deutsch
Português
日本語
Read-only
renderScheme(host, paletteUrl, scheme) — drop a finished scheme into an article, the documentation or a product page.
Diagram JS
Diagram JS — a browser component that draws a Designer strategy scheme right on the page: the same blocks, ports and links, the same look. No external dependencies, all on a single canvas. The scheme ...
0
Downloads
☆☆☆☆☆
Rating
0
Reviews
Diagram JS — a browser component that draws a Designer strategy scheme right on the page: the same blocks, ports and links, the same look. No external dependencies, all on a single canvas.
The scheme below is not a picture but the component itself: drag it, zoom with the wheel, open it full screen.
0
external dependencies
2
modes
npm
install
Editor
StockSharpDiagram — dragging blocks, connecting ports and events about what changed.
The Designer palette
Element types, their ports and colours come from the same palette Designer uses, so a scheme looks the same everywhere.
A scheme is nodes and links between their ports; there is nothing else to learn:
import { renderScheme } from '@stocksharp/diagram/embed';
const scheme = {
nodes: [
{ id: 'candles', typeId: 'CandleElement', name: 'Candles', x: 60, y: 130 },
{ id: 'sma', typeId: 'IndicatorElement', name: 'SMA', x: 340, y: 60 },
{ id: 'chart', typeId: 'ChartElement', name: 'Chart', x: 620, y: 130 },
],
links: [
{ from: 'candles', fromPort: 'Output', to: 'sma', toPort: 'Input' },
{ from: 'sma', fromPort: 'Output', to: 'chart', toPort: 'Input' },
],
};
renderScheme(document.getElementById('diagram'), '/palette.json', scheme);