nowthis / sankeymatic

Make Beautiful Flow Diagrams
http://sankeymatic.com/build/
ISC License
843 stars 122 forks source link

Exportable/importable diagram source #5

Closed nowthis closed 1 year ago

nowthis commented 8 years ago

Make it possible to export all the parameters of a diagram with one click, so a diagram can be fully specified with one chunk of JSON (or simple text, maybe).

Allow the import of that same exported spec with one click (or maybe POST).

Among other useful effects, this would let users save diagrams in progress and come back to them later.

william-r-greene commented 3 years ago

"All the parameters of a diagram" would include the settings on the SankeyMATIC(BETA) page, such as: Diagram Width Height Vertical Space between Nodes

Ideally these parameters could be specified in the text that users paste into the "Inputs:" box.

nowthis commented 1 year ago

Working on this one now, finally.

...rubs hands together...

nowthis commented 1 year ago

The final commit was not the only one relevant here - nearly all of today's commits were directly part of this feature:

0bd03df 1d8c02e 8500cbd 3fc76a6 c9dbf76

An example of the output now produced when you click 'Save my work' (the current "Financial Results" diagram with several nodes manually adjusted upward):

// SankeyMATIC diagram inputs - Saved: 1/29/2023, 8:07:41 PM
// https://sankeymatic.com/build/

// === Nodes and Flows ===

Division A [900] Revenue
Division B [750] Revenue
Division C [150] Revenue

Revenue [1000] Gross Profit

Gross Profit [350] Operating Profit
Gross Profit [650] Operating Expenses

Operating Profit [260] Net Profit
Operating Profit [90] Tax

Operating Expenses [640] S G & Admin
Operating Expenses [10] Amortization

Revenue [800] Cost of Sales

// Profit - blue
:Gross Profit #48e <<
:Operating Profit #48e <<
:Net Profit #48e <<

// Expenses - rust
:Operating Expenses #d74 <<
:Tax #d74 <<
:S G & Admin #d74 <<
:Amortization #d74 <<

// Cost - grayish-gold
:Cost of Sales #e6cc91 <<

// main Revenue node: dark grey
:Revenue #444

// === Moved Nodes ===

move Revenue 0, -0.56254
move Division A 0, -0.22768
move Gross Profit 0, -0.29479
move Operating Profit 0, -0.18549
move Net Profit 0, -0.15645
move Operating Expenses 0, -0.09776
move Division B 0, -0.14341
move Division C 0, -0.08505
move Cost of Sales 0.00231, 0.21993

// === Settings ===

size w 1000
  h 600
margin l 12
  r 12
  t 18
  b 20
bg color #ffffff
  transparent N
node w 5
  h 70
  spacing 70
  border 0
  theme none
  color #888888
  opacity 1
flow curvature 0.5
  inheritfrom none
  color #999999
  opacity 0.45
layout order automatic
  justifyorigins N
  justifyends Y
  reversegraph N
labels color #000000
  highlight 0.55
  fontface sans-serif
labelname appears Y
  size 13
  weight 400
labelvalue appears Y
  fullprecision Y
labelposition first before
  breakpoint 6
value format ',.'
  prefix '$'
  suffix ''
themeoffset a 9
  b 0
  c 0
  d 0
meta mentionsankeymatic Y
  listimbalances Y